How to stop execution in jConfirm condition in jquery-alerts.js

Question

Please check the following code:

I don't want to execute alert('End'); before confirming the confirmation dialog.

<link href="http://labs.abeautifulsite.net/archived/jquery-alerts/demo/jquery.alerts.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://labs.abeautifulsite.net/archived/jquery-alerts/demo/jquery.alerts.js"></script>
<script type="text/javascript">

   $(document).ready( function() {
            $("#confirm_button").click( function() {
     alert('Start');
                    jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) {
                 if(r){alert('Ok');}else{alert('Cancel');}
             });
      alert('End');
    });
});

  </script>
<fieldset>
   <legend>Confirm</legend>
 
   <p>
    <input id="confirm_button" type="button" value="Show Confirm">
   </p>
  </fieldset>

Answer 1

You can't stop the code from executing, when you're calling async functions (like jConfirm in this case, another popuplar example is ajax()).

When you're working with async functions, you must also work with callback functions.

Code that needs to be executed after the dialog is closed needs to go into function(r) { ... } - everything else will be executed parallel.

jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) {
    if(r){alert('Ok');}else{alert('Cancel');}
    // Put your code here and it will be executed when the dialog is closed.
});

<link href="http://labs.abeautifulsite.net/archived/jquery-alerts/demo/jquery.alerts.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://labs.abeautifulsite.net/archived/jquery-alerts/demo/jquery.alerts.js"></script>
<script type="text/javascript">

   $(document).ready( function() {
            $("#confirm_button").click( function() {
     alert('Start');
                    jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) {
                 if(r){alert('Ok');}else{alert('Cancel');}
                    alert('End');
             });
      
    });
});

  </script>
<fieldset>
   <legend>Confirm</legend>
 
   <p>
    <input id="confirm_button" type="button" value="Show Confirm">
   </p>
  </fieldset>