How to detect that the JQuery-Mobile dialog box has been closed

I have a jQuery-Mobile dialog which I open from my page main.html like so:

$.mobile.changePage("settings.html", {
    role: "dialog",
    transiation: "pop",
    changeHash: true
});

Now I would like to get a callback on my site main.html, when the dialog is closed so that I can proceed with the information entered in the dialog.

Update: Mentioned that I should receive the callback on my initial location main.html


Solution

Dialog is just another version of a classic jQuery Mobile page so page events can also be used.

What you want to use is pagebeforehide event.

Working example: http://jsfiddle.net/Gajotres/cbc5q/

$(document).on('pagebeforehide', '#second', function(){
    alert('Close Dialog');
});

There are few other events you an use and you can find them in this ARTICLE, just look for a chapter called: Page events transition order

Proof

Because you are using several HTML pages I made you a working example made from 2 HTML files:

index.html

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
    <script>
        $(document).on('pagebeforeshow', '#index',function (e, data) {
            var prevPage = data.prevPage.attr('id');
            if(prevPage === 'second'){
                alert('sdfs');
            }
        });
    </script>
</head>
<body>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
        </div>

        <div data-role="content">
            <a href="dialog.html" data-role="button">Open dialog</a>
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>
</body>
</html>

dialog.html

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>   

</head>
<body>
    <div data-role="dialog" id="second">
        <div data-theme="a" data-role="header">
            <h3>
                Second Page
            </h3>
        </div>

        <div data-role="content">
            <a href="index.html" data-role="button">close Dialog</a>
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>
</body>
</html>

First take notice, inside a dialog.html, javascript is placed inside a page/dialog div. This ise because jQuery Mobile strips HEAD content + everything else when opening additional pages. This is why javascript is placed inside a page/dialog div.

This should do it:

$(document).on('pagebeforeshow', '#index',function (e, data) {
    var prevPage = data.prevPage.attr('id');
    if(prevPage === 'second'){
        alert('sdfs');
    }
});

This code will trigger on an initial page, just before it is shown. If previous page was a dialog then execute an action.