jQuery Alert Dialogs

Question

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

Answer 1

jConfirm will never "return" anything because it's "event driven".

jConfirm waits until the user has made a decision and then it will call the callback function which will handle the answer. But jConfirm will not block the code execution flow like the 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 for illustration:

The standard JavaScript confirm() execution flow

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

The jConfirm execution flow

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