0

Trying to work out how to close a dialog and return to the calling page (where the page is a div within a multipage template).

The dialog defaults to the first page div (back button) or # (x button) - I need it to close and remain on the referring page/div.

Tried this: 

$('#dialog').live('pagehide', function (e) {
    $.mobile.changePage("#full-map");
});

but I still get a flick back to #index before transitioning to #full-map. Is there any where I can intercept the close function itself?

I trigger the dialog like so, on clicking a Google map marker:

google.maps.event.addListener(marker, 'click', function () {
    $.mobile.changePage("#dialog", {
        transition: "pop",
        reverse: false,
        changeHash: false,
    });
});
Nathan
  • 949
  • 1
  • 20
  • 35
  • 1
    Use `.on` instead of `.live` and try this code on X click `$('#dialog').dialog('close', fucntion () { $.mobile.changePage('#full-map'); });` or you can just '$.mobile.chnsgePage` once X is clicked. – Omar Jul 11 '13 at 03:27
  • Thanks Omar, but this doesn't work - still bumps back to the root div. I've changed changeHash to true, and while it now adds a history entry, I get the dialog behaviour I need. Will do for now... – Nathan Jul 11 '13 at 03:37
  • Ok, for history, add data-history=false to dialog div. – Omar Jul 11 '13 at 03:52

1 Answers1

0

You are missing role:dialog? Full api here

$.mobile.changePage( "#myDialog", { role: "dialog" } );

I think this will keep the site from scrolling back to the main page, also you can add button and close the dialog with javascript instead of relying on default dialog close button.

$( "#myDialog" ).dialog( "close" );
abdu
  • 667
  • 5
  • 14