CODEWITHSUNDEEP
javascriptjquerymodal-dialog
LrakWortep
LrakWortep

Reputation: 217

Jquery dialog afterOpen event

I am trying to use a jquery dialog as a "please wait" message. This usually works but this particular task is CPU intensive and freezes prior to the async dialog open. I have tried attaching the task to the "open" event in dialog but the open event and "focus" event fire prior to the dialog opening

$("#dialogbox").dialog({
    autoOpen:false,
    modal:true,
    title: "Use of Open event",
    width:300,
    open: function( event, ui ) {
        alert('hello open');
    },
     focus: function( event, ui ) {
        alert('hello focus');
    }
});

$('#mybutt').click(function() {
    $('#dialogbox').html('<h2>Watch this</h2>An alert box should have opened');
    $('#dialogbox').dialog('open');
});

fiddle me

Any suggestions?

Upvotes: 0

Views: 710

Answers (1)

Eliellel
Eliellel

Reputation: 1446

You can use setTimeout(fn, 0); to requeue the execution. As you can see in the example "hello focus" appears before "hello open".

$("#dialogbox").dialog({
    autoOpen:false,
    modal:true,
    title: "Use of Open event",
    width:300,
    open: function( event, ui ) {
        setTimeout(function(){alert('hello open');}, 0);
    },
     focus: function( event, ui ) {
        alert('hello focus');
    }
});

$('#mybutt').click(function() {
    $('#dialogbox').html('<h2>Watch this</h2>An alert box should have opened');
    $('#dialogbox').dialog('open');
});
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="dialogbox"></div>
<input id="mybutt" type="button" value="Click Me">

Upvotes: 1

Related Questions