Question

In jQuery Mobile I have several chained dialog boxes sliding in/out one after another when inputs were made and ‘next’-buttons were clicked. But any time the close-button inside the header of the dialog box is clicked I want to get back to the initial page where the first dialog box was triggered. Normally the close button in each dialog box leads back to the page/box it was triggered from. But in my app I need to override them all to get back to the first page!

My code:

<div class="ui-block-b">
    <a data-role="button" data-theme="b" data-icon="arrow-r" data-iconpos="right" 
        data-transition="slide" href="nextpage.html" data-rel="dialog">
        next
    </a>
</div>

thnx!

edit: The docs say

CHAINING DIALOGS: “Please note: If a dialog opens another dialog (chaining), closing the
last one with a link of type data-rel=”back” will always navigate to
the previous dialog until the root-page of type data-role=”page” is
reached. This guarantees a consistent navigation between dialogs.”
[http://jquerymobile.com/demos/1.2.0-beta.1/docs/pages/page-dialogs.html]

Answer 1

You can override the close method defined for the dialogs $.mobile.dialog.prototype.close:

<script>

    $.mobile.dialog.prototype.close = function(){

        console.log("close");

        // DO SOMETHING HERE - EX: REDIRECTING TO MAIN PAGE
        $.mobile.changePage("index.html");
    };

    $(function() {
        console.log("document loaded");         
    });

</script>