JQuery Alert Dialogs

Question

I'm new to jquery and I was looking for something that could replace the confirmation dialog. I found jQuery Alert Dialogs at http://abeautifulsite.net/blog/2008/12/jquery-alert-dialogs/#demo but jConfirm does not return the same values ​​as confirm (). Is it possible to write a function to get the same confirm () value? This is about the meaning of the callback function that I assume is not so clear to me :-)

Answer 1

jConfirm will never “return” anything because this “event is driven”.

jConfirm waits for the user to make a decision, and then he will call a callback function that will handle the response. But jConfirm will not block the flow of code, as standard confirm(...) does.

So, if your previous code looks like this:

 // ask for a decision var answer = confirm("Leave website?"); // the whole script stops until the user has made a decision! // process answer if (answer){ alert("Bye bye!"); // the script waits here until the user has clicked "ok" window.location = "http://www.google.com/"; } else{ alert("Thanks for sticking around!"); // the script waits here until the user has clicked "ok" } 

it should look like this in jQuery:

 // previous code // show confirm dialog but the script will not wait, the script execution goes forward jConfirm('Leave website?', 'Confirmation Dialog', function(answer) { // this is the callback function of the jConfirm dialog we made // we arrive here when the user has made a decision // the answer is true, he wants to leave if (answer){ // show a jAlert box jAlert("Bye Bye!", "Some Title", function() { // this is the callback function of the jAlert box // we arrive here when the user has clicked "ok" // send him to google window.location = "http://www.google.com/"; }); } else{ // show a jAlert box without any callback jAlert("Thanks for sticking around!", "Some Title"); } }); // the code that follows here will be immediately executed // because unlike confirm(), jConfirm() will not block // the code execution flow 

And to illustrate:

Standard JavaScript Confirmation Stream () JavaScript

  | | | \/ confirm() waits for an answer... no further code will be executed until the user has made a decision | | \/ handle the user answer | | \/ further code execution 

JConfirm execution thread

  | | \/ -------> jConfirm Dialog | | | | | \/ | Callback function | when the user has made | a decision. | (handle the answer here) | | \/ further code execution 

Answer 2

You can use the dialog . from jQuery user interface. This is what I use.

You can make the buttons whatever you want and process them like this:

 $( "#dialog-confirm" ).dialog({ draggable: false, resizable: false, modal: true, buttons: { Ok: function() { // Do whatever you want to do when the user clicks Ok // Lastly, close the dialog $(this).dialog("close"); }, Cancel: function() { // Do whatever you want to do when the user clicks Cancel // Lastly, close the dialog $(this).dialog("close"); } } }); 

Answer 3

The confirm() function is a synchronous call (i.e. it returns only when the user clicked a button). Dialogs like jQuery are asynchronous (one call to open it and a callback with the result). Therefore, you should use the callback function and write your code in different ways. It is not possible to have a jquery type dialog box running in a synchronous call.

Answer 4

you can wrap jconfirm in another function and then wait for a response something like this:

 function Confirm(){ var response; jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) { response = r; }); return response } 

now you can use if(Confirm()){alert('Has been confirmed');}

Answer 5

See reuse code below. Remember that a jquery warning will not wait for user action. The statement after showAlert () will be executed immediately.

 /** dialogUtils.js start */ var iconStyle = '<span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 50px 0;"></span>'; var messageStyleStart = '<span align="center" style="font-family:arial, verdana, sans-serif;font-size:9.3pt;">'; var messageStyleEnd = '</span>'; var alertDialogHeight =190; var alertDialogWidth =460; var fieldToFocus; var $alertDialog; /** shows the alert box - if the title is passed display that otherwise shows the default title message - message to display on the alert box title - title of the box fieldIdtoFocus - if you need to give the focus to any field after showing the alert (id of the field) height width */ function showAlert(message,title,fieldIdtoFocus,height,width) { $alertDialog.html(iconStyle + messageStyleStart +message + messageStyleEnd); if(title =='undefined'|| null ==title ||''==title) $alertDialog.dialog( "option", "title", alertHeader ); else $alertDialog.dialog( "option", "title", title ); // check for the field focus value, if the value passed use it, otherwise reset it. if(fieldIdtoFocus == 'undefined' || null == fieldIdtoFocus || ''== fieldIdtoFocus) fieldToFocus = null; else fieldToFocus = fieldIdtoFocus; // check if got height if(height == 'undefined' || null == height || ''== height) $alertDialog.dialog( "option", "height", alertDialogHeight); else $alertDialog.dialog( "option", "height", height); //check if got width if(width == 'undefined' || null == width || ''== width) $alertDialog.dialog( "option", "width", alertDialogWidth); else $alertDialog.dialog( "option", "width", width); // open the alert dialog box $alertDialog.dialog('open'); // prevent the default action return false; } $(document).ready(function(){ //jquery alert box - the general alert box $alertDialog = $('<div style="vertical-align:middle;"></div>') .html('This Message will be replaced!') .dialog({ autoOpen: false, modal: true, position: 'top', buttons: { Ok: function() { $( this ).dialog( "close" ); if(null != fieldToFocus){ if($('#'+fieldToFocus).is(':visible')) // if it is visble then only show $('#'+fieldToFocus).focus(); } } } }); }); /** dialogUtils.js end */ // call the function from anywhere in your code after including the dialogUtils.js above */ showAlert("Please enter your phone number",'Alert!','phoneNumber');