Dialog close event in jquery mobile

Question

I am using jquery mobile and a dialog to display some multiple select boxes. Some of the content is dynamically created with Ajax based on the selections. I would like to make the Ajax call when the dialog is closed (through the regular x button). The main parts of the html look as follows:

    <a href="#queryPage" data-rel="dialog"  data-transition="slidedown"  >Filter Results</a>
    <div data-role="page" id="queryPage" data-theme="a">
    <div data-role="header" data-theme="a">
    <h1>Select Filters</h1>
    </div>
    <div data-role="content">
    <form action="" method="get" id="filterForm">
    <fieldset id ="filterFields"></fieldset>
    </form>
    </div>
    </div>

I am currently making the call by running the code on page hide as follows: $('#queryPage').live('pagehide', function(event) { //code for ajax call });

However, I would like to make the call when the dialog closes because some of the select lists are large and they create a new page that hides the queryPage even though the dialog has not been closed. I have tried:

    $('#queryPage').bind('dialogclose', function(event) {
         alert('closed');
     });

and also tried

    $('#queryPage').dialog({close:function(event, ui){
        alert("closed");
    }});

These I have put in a function called on page load but the alert is not shown when the dialog is closed. Any help will be appreciated.

Answer 1

There are no specific events for dialogs as they are simply pages that are displayed as a dialog. Try the pagehide event.

$("#MyDialog").bind("pagehide",function(){
  alert("Dialog closed");
});

Also, the first line of your sample code has a link that is outside of a <div data-role="page"> which should not be done.