I want to create a custom confirm box like this
var should_I_move_forward = myconfirmbox();
myconfirmbox will show a popup with Yes/No button, I want to pause the execution here until user hit yes or no, how can I achieve it?
i.e. same functionality as of js confirm method buy my own UI.
You can't.
You will have to move the logic that follows the confirmation inside the myconfirmbox method, or pass it as parameters (to call on demand)..
something like
function ConfirmYes(){
// do something for Yes
}
function ConfirmNo(){
// do something for No
}
function myconfirmbox(yesCallback, noCallback){
// whatever you currently do and at the end
if (confirmation == 'yes'){
yesCallback();
} else {
noCallback();
}
}
myconfirmbox(ConfirmYes, ConfirmNo);
What I did is not elegant at all but it working fine for me! I create a custom confirm function like:
function jqConf(msg,y,n){
$('body').append('<div id="confirmBox">msg</div>');
$('#confirmBox').append('<div id="confirmButtons"></div>');
$('#confirmButtons').append('<button onclick="'+y+'();">Yes</button>');
$('#confirmButtons').append('<button onclick="'+n+'();">No</button>');
}
function defaultYes(){
alert('Awesomeness!');
}
function defaultNo(){
alert('No action taken!');
}
The I use it like this:
<button onclick="jqConf('Do you love me?','defaultYes','defaultNo')">Confirm</button>
This way I pass as a string the name of the function to run if Yes and if No individually and is executed by the user event.
As I say, nothing elegant but it works!, no loops or confusing codes, I think?, In the example I'm using jQuery but can be accomplish with plain JavaScript too!
Related
I've noticed from a few different projects of mine that whenever I click something I add an onClick function to, it always takes two clicks to get them going when a page is freshly loaded. The general structure I use for them is:
function PageChange(){
var welc_p = document.getElementById("welcome");/**gathers page DIVs**/
var page01 = document.getElementById("page01");
var page02 = document.getElementById("page02");
var start = document.getElementById("start_btn");/**gathers buttons**/
var p1_back = document.getElementById("p1_back");
var p1_next = document.getElementById("p1_back");
var p2_back = document.getElementById("p2_back");
var p2_next = document.getElementById("p2_back");
start.onclick=function(){
page01.style.display="block";
welc_p.style.display="none";
window.location="#page01";
};
}/**function**/
then the way I call it in the html is
<div class="some_class" id="start_btn" onClick="PageChange()">!!!LETS GET STARTED!!!</div>
Here's a fiddle of it as well.
https://jsfiddle.net/Optiq/42e3juta/
this is generally how I structure it each time I want to create this functionality. I've seen tons of other posts on here about their items taking 2 clicks to activate but none of them were doing anything near what I was trying to accomplish and it seemed their problem was within their coding. Does anybody know why this is happening?
This is because you are attatching a event handler to your button on click of your button.
This means that one click of the button activates the event handler, not the code within start.onclick=function() {
Then, the second click works becasue the event handler has been activated, and now the code will run.
Try moving your code out of the function, then it will work with just one click
Just had the same issue, and found an easy solution based on the above answer.
Since your function needs two clicks to work, I just called the function above the function and it works fine. This way the function already gets called one time on load, then it gets called the second time when you click it.
yourFunction();
function yourFunction(){
-- content --
}
I also had the same 2 clicks required on intitial interaction and after many searches couldn't find the best solution for my specific nav menu. I tried this solution above but couldn't get it to work.
Stumbled upon this code from a youtube example and it solved my issue. I wanted to nest submenu's for multiple levels and modified it from its original implementation to work best for my responsive mobile menu.
var a;
function toggleFirstLevelMobileSubMenu(){
if(a==1){
document.getElementById("mobile-sub-menu-depth-1").style.display="none";
return a=0;
}
else {
document.getElementById("mobile-sub-menu-depth-1").style.display="flex";
return a=1;
}
}
var b;
function toggleSecondLevelMobileSubMenu(){
if(b==1){
document.getElementById("mobile-sub-menu-depth-2").style.display="none";
return b=0;
}
else {
document.getElementById("mobile-sub-menu-depth-2").style.display="flex";
return b=1;
}
}
Of course, in the CSS I had display: none set for both ID's.
First, the problem:- On first click instead of running js your browser runs the button aka the event.
Solution:- in order to resolve this we need to make sure our function is already before the event is run (this is one of the ways to solve the problem). To achive this we need to load the function aka call the function in some way.
So, i just simply called the function after function is completed.
Code answer-
Just add at the end of your code
PageChange();
I have a code to put a wait cursor on all the images when a image is clicked.
function disableButton()
{
idStopSelBtn.style.cursor='wait';
idStartSelBtn.style.cursor='wait';
idBounceRunningBtn.style.cursor='wait';
idStopAllBtn.style.cursor='wait';
idStartAllBtn.style.cursor='wait';
idBounceSelBtn.style.cursor='wait'
}
When the function called by clicking of button gets I designed another function to take away wait cursor and put default cursor.
function enableButton(strType)
{
idStopSelBtn.style.cursor='default';
idStartSelBtn.style.cursor='default';
idBounceRunningBtn.style.cursor='default';
idStopAllBtn.style.cursor='default';
idStartAllBtn.style.cursor='default';
idBounceSelBtn.style.cursor='default';
alert('done');
}
The wait sign is still not going after calling this function. I just added alert to check if the function is firing or not and it's firing, still cursor sign is not changing.
try setting it to auto instead of default:
function enableButton(strType) {
idStopSelBtn.style.cursor='auto';
idStartSelBtn.style.cursor='auto';
idBounceRunningBtn.style.cursor='auto';
idStopAllBtn.style.cursor='auto';
idStartAllBtn.style.cursor='auto';
idBounceSelBtn.style.cursor='auto';
alert('done');
}
This is what you need.
idStopSelBtn.Attributes.Add( "onclick", "document.body.style.cursor = 'wait';" );
Please correct me if I am wrong. I am not a .net developer and I guess this is .net code and our team is doing like this...
I hope it may help...
EDIT it as you want. Instead of putting direct css code there itself call a js function and proceed with default and wait cursor manipulation there.
I have a form that has a delete button, I would like to create a confirmation box that pop ups when the delete button is clicked. The delete button currently works. I have tried several things in javascript with no luck. I am using Angular.
Is this best approach for this?
Also, does anyone know of any examples for this, I have not found any that work.
$(document).ready(function(){
$("form").validate();
$(".radius small success button").ConfirmDialog('Are you sure?');
});
Seems like an AngularJS directive is a bit over-the-top for a solution to this. Seems easier just to use straight javascript unless you need some custom functionality to your "confirm()" function.
if (confirm('Are you sure you want to delete this?')) {
// TODO: Do something here if the answer is "Ok".
}
Hope this helps, cheers
UPDATE: Actually, with Angular, it would be better to use $window.confirm as this would allow you to test with Karma/Jasmine.
Here's another approach at this.
Basically it's a directive that gets the warning string you want to show, and the function to call if the user accepts. Usage example:
<button type="button" ng-really-message="Are you sure?"
ng-really-click="delete()">Delete</button>
This is how we're handling our 'confirmation dialogs' (using bootstrap)
The Markup
<div class="alert alert-block alert-error notification fade in" data-ng-show="displayLocationDeletePopup">
<h6>Are you sure you want to delete this location?</h6>
<div class="form-controls-alert">
No
Yes
</div>
</div><!-- end alert -->
Setting model to false on controller load to hide by default with ng-show
$scope.displayLocationDeletePopup = false;
On click on event for show popup, calls a function/passes model in
<i class="icon-remove" data-ng-click="showDeleteLocationPopup(true, location)"></i>
In the controller:
$scope.showDeleteLocationPopup = function(options, id) {
if (options === true) {
$scope.displayLocationDeletePopup = true;
} else {
$scope.displayLocationDeletePopup = false;
}
$scope.locationId = id;
};
And per the anchors in the html above, can either close the popup or run the function
$scope.deleteVendorLocation = function (storeLocation) {
// Code to run on confirmation
};
var r = confirm("Are you sure you want to Permanently delete this order?");
if (r == true) {
(OK button click) Write the function here.....
} else {
(Cancle button click) Write the function here.....
}
Place Delete option on the right hand side of each record and on clicking the delete option the record should get deleted from the details and JSON array.
I want to make a custom made confirmation box in javascipt just like the built in confirm box. the built in confirm box does not allow the code to progress unless the user selects atleast one thing. Below is my code:
*****HTML start*****
<div class = "popUp confirm" style="z-index:40000;" id="confirmBlock">
<div id = "confirmLabel" >Confirm Message</div>
<div style ="border:0px solid red;height:44.56px;">
<input id="Confirm" type="button" value="Confirm" onclick = "confirmAction(1)" />
<input id = "CancelConfirm" type="button" value="Cancel" onclick = "confirmAction(0)" />
</div>
</div>
*****HTML end*****
*****Javascript start*****
var confirmresult = "-1";
function confirmationLoop()
{
alert("If this alert is preesnt it works, seems like the built in alert provides some sort of pause for other parts of code to continue to work");
if(confirmresult == "-1")
confirmationLoop();
return;
}
function confirmAction(val)
{
confirmresult = val;
}
function checkuuu()
{
confirmresult = "1";
}
function confirmMessage(message)
{
document.getElementById("confirmLabel").innerHTML= message;
//var check = setTimeout(function(){confirmAction(1)},5000);
confirmationLoop();
/*
while(1) //using while almost does not allow any other part to run at all hence tried recursion
{
if(confirmresult != "-1")
break;
}
*/
document.getElementById("confirmLabel").innerHTML= "Confirm Message";
var returnVal = confirmresult;
confirmresult = -1;
return returnVal;
}
*****Javascript end*****
*****Sample code start*****
So this i what i expect below:
function example
{
var check = confirmMessage(message);
//the next part of code should not execute untill i press confirm or cancel, using settimeout or settimeinterval is asynchronous and the code flow continues. i want the effect something like alert and confirm built in boxes
}
*****Sample code end*****
I used loop but it keeps the thread completely occupied and does not give me a chance to press any button, which was quite obvious
However recursion gives u the freedom to perform other activities. The problem even though the value of confirmResult will become 1 upon pressing confirm button, which i check through alert. the recursive loop i.e. confirmation loop does not seem read it as 1. it still continues as -1. If i put a alert in that confirmation loop the value wil be read as 1. Can anyone help me to achieve what i started out to??????
P.s.=> sorry for such a huge question!!!
You can't use any sort of loop - as you've found it'll just cause the browser to lock up.
What you need to do is to emulate a "modal" dialog box.
This is usually done by having your dialog box appear on top of another "overlay" element which importantly covers every other element, and prevents any user interaction with them.
It's also pretty hard to implement a confirm function that'll return a value - the window.confirm method can only do that because it's synchronous - it blocks all other JS processing while the dialog is displayed.
The easiest approach is to instead supply a callback function that'll get called once the user has selected the desired value.
First I am using the jQuery colorbox plugin that is working fine so far but then I want to close the colorbox using a button. Unfortunately I can't just trigger the click event on that button by selecting its ID using jQuery, instead of that the button must call a javascript function called closepan() (this behavior is unfortunately mandatory for me).
I tried to create the function
closepan() {
$.colorbox.close();
}
first case : inside the
$(document).ready(function(){...});
but then I got the error closepan is undefined.
second case : before the
$(document).ready(function(){...});
but then it's the colorbox method that is undefined!
I gave up after gazillion hours of fiddling with several solutions I've found all around stackoverflow.com regarding this topic! I can't figure out how to make this working!
In other words, how to create a function named closepan() that can execute $.colorbox.close(); while being available globally for my button?
No matter where you create a variable or function if you create it on window it will be available globally.
window.closepan = function() {
// hello there
}
function closepan() {
if($.colorbox) {
$.colorbox.close();
}
}
However, at the point where someone clicks your button all external scripts should have been loaded so that check shouldn't be necessary...
Don't forget to put the keyword function in front of your declaration...
function closepan() {
$.colorbox.close();
}
Working JSFiddle