jAlert and jConfirm not working correctly together

Here’s is my code

    <script type="text/javascript">
    function myFunction()
     {
       jAlert("Hello","How are you?");
       alert("Hi");
      jConfirm('Can you confirm this?', 'Confirmation Dialog');
      }
     </script>

When I run this code alert (hi) appears first and then jAlert appears, but the control remains with alert (The “Ok” button of jAlert doesn’t work) but once I press “Ok” in the alert box disappears along with the jAlert and jConfirm pops up. And also if I remove the alert, jAlert doesn’t even appear it directly displays the jConfirm dialog box. The same type of thing happen if I change the order of jAlert with jConfirm.

I kind of guess the problem is due to some asynchronicity, but is there a solution or how could this kind of problem be handled?

Answer

html

<input id="confirm_button" type="button" value="Show Confirm" />

Script

$(document).ready( function() {

    $("#confirm_button").click( function() {
        jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) {
            jAlert('Confirmed: ' + r, 'Confirmation Results');
        });
    });

});

Also make sure you have below files placed

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.ui.draggable.js" type="text/javascript"></script>
<script src="jquery.alerts.js" type="text/javascript"></script>
<link href="jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />