Trigger event on dialog box open

Question

My dialog box is defined under the div

#dialogbox

When the dialog box opens i want to trigger an event such that it alerts open. The code im using is:

$("#dialogbox").dialog({open: function(){
           alert("OPEN");
          }
});

But this doesnt seem to trigger when dialog box is opened Please help

Janessa

Should open, whats your console say? – Movement

Answer 1

You can use this :

$( ".selector" ).dialog({
  open: function( event, ui ) {}
});

or the event listener .on

$( ".selector" ).on( "dialogopen", function( event, ui ) {} );

More information in this page :

http://api.jqueryui.com/dialog/#event-open

Devilment

Thank you . You are my new god. And considering im hindu, that doesnt count for much . But thanks a lot. I have been rattling my brain for 3 hours because of this "listener" issue. – Janessa

that place (open:) is also a good spot to define handlers, since they will ony be defined once; handlers such as .on("change", function ( ... )); In fact, handlers may not work, even using .on, if placed outside of this "open:" section. – Musick

Answer 2

Try this:

jsFiddle here

HTML:

<div id="dialogbox"></div>
<input id="mybutt" type="button" value="Click Me">

Javascript/jQuery:

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

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

Necrophilism

Answer 3

It will display alert after clicking on the OK button.

$( "#WaitingDialog").html("Message you want to display").dialog({
   modal: true,
   buttons: { 
    Ok: function() {
       alert("hello");
    }
}});

It will display alert after opening the modal

$( "#WaitingDialog").html("Message you want to display").dialog({
    modal: true,
    buttons: { 
        open: function( event, ui ) {
              alert('hello');
          }
    }});

Boogie

Answer 4

You can also use the focus event Click here for documentation

Tweak