How to stop script when using jQuery Dialog?

Question

I'm sure this has been asked here many times. The latest one I saw was on Dec. 2012. But I would like to ask if someone's got a fix/better workaround for this problem.

I'm using jQueryUI Dialog and I would like to ask if it is possible to stop the script execution when the dialog pops up and the user haven't selected an answer yet. Just like the javascript confirm() does.

Here's what I have so far:

jQuery

$("#GlobalDialogBox").dialog({
        modal: true,
        buttons: {
        "Yes": function () { 
            callbackFunctionTrue();
            $(this).dialog('close'); 
         },
        "No": function () { 
            callbackFunctionFalse();
            $(this).dialog('close'); 
         }
      }
    });

   alert("This should fire after answering the dialog box."); //but this fires as soon as the dialog pops up.. :(

The alert is a common part of the script that fires after answering the dialog box regardless of the answer. On my fix, I just inserted the alert in callbackFunctionTrue() and callbackFunctionFlase() and it does the job.

But what if I don't want to do that? How would I stop the script when the dialog pops up so that I can freely add my codes below the dialog script? Does anybody have a better solution? Any help would be appreciated! Thanks in advance! :]

Answer 1

When dialog is being closed it triggers close event. You can do that by adding event listener to your dialog:

$("#GlobalDialogBox").on( "dialogclose", function( event, ui ) {
      alert("something");
});

or in more consistent way:

$("#GlobalDialogBox").dialog({
    modal: true,
    buttons: {
        "Yes": function () { 
            callbackFunctionTrue();
            $(this).dialog('close'); 
         },
        "No": function () { 
            callbackFunctionFalse();
            $(this).dialog('close'); 
         }
    },
    close: function(event, ui){
       alert("something");
    }
});

Answer 2

You can't really pause script execution arbitrarily. Callback functions are your best solution in this case, so below your buttons options on the dialog add a close event handler and put your alert and any other code you want to execute after the dialog closes in there.

Answer 3

function dialog_confirm(){
  $( "#dialog-confirm" ).dialog({
    //autoOpen: false,
    resizable: false,
    height:140,
    modal: true,
    buttons: {
      "Delete all items": function() {
        $( this ).dialog( "close" );
        dialog_confirm_callback(true);
      },
      Cancel: function() {
        $( this ).dialog( "close" );
        dialog_confirm_callback(false);
      }
    }
  });
}
function dialog_confirm_callback(value) {
  if (value) {
    alert("Confirmed");
  } else {
    alert("Rejected");
  }
}