Dialog box close event in jQuery mobile

Question

I am using jquery mobile and a dialog box to display multiple selection blocks. Some of the content is dynamically generated using selection-based Ajax. I would like to make an Ajax call when the dialog is closed (via a regular x button). The main parts of html are 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 a call by running the code on the page as shown below: $('#queryPage').live('pagehide', function(event) { //code for ajax call });

However, I would like to call when the dialog closes because some of the selection lists are large and they create a new page that hides the request object, even if the dialog was not closed. I tried:

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

and also tried

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

I included a function called page loading, but the warning does not appear when the dialog is closed. Any help would be appreciated.

Answer 1

There are no specific events for dialogs, as these are just pages that are displayed as dialogs. Try the pagehide event.

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

In addition, there is a link in the first line of your sample code that is outside the <div data-role="page"> , which should not be executed.

Answer 2

Pagehide can be delegated as such:

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

and you will also have access to the screen elements of the calling page.

Answer 3

Andleer shared an event to close the dialog using jquery. however, we can also code in this way.

  $(document).on("pagehide","#Dialog",function(){ console.log('Dialog has closed.'); });