consatan
consatan

Reputation: 359

How to close a dialog and return another link (not go back)?

I want closed dialog open page2 not go back page1.

I tried bind pagehide event on dialog like this, but it first goes back page1 then open page2, not direct open page2.

$("#dialog").bind("pagehide", function() {
  $.mobile.changePage("#page2");
});
<div data-role="page" id="page1">
  <div data-role="content">
    page1
    <a href="#dialog" data-iconpos="notext" data-transition="slide">open dialog</a>
    <a href="#page2" data-iconpos="notext" data-transition="slide">open page2</a>
  </div>
</div>
<div data-role="page" id="page2">
  <div data-role="content">page2</div>
  <a href="#page1" data-iconpos="notext" data-transition="slide">open page1</a>
</div>
<div data-role="dialog" id="dialog">
  <div data-role="header"><h1>dialog</h1></div>
  <div>Dialog</div>
</div>

Upvotes: 0

Views: 93

Answers (1)

ezanker
ezanker

Reputation: 24738

In jQM 1.4 you define a page to look like a dialog by assigning data-dialog="true":

<div data-dialog="true" id="dialog">

Then to redirect on close, you could handle it this way:

$(document).on("pagecreate", "#page1", function () {
    $("body").on("pagecontainerbeforetransition", function (event, ui) {
        var oldpageid = $("body").pagecontainer("getActivePage").prop("id");
        var newpageid = ui.toPage.prop("id");
        if (oldpageid == "dialog" && newpageid == "page1") {
            $("body").pagecontainer("change", "#page2", {"transition": "slide"});
            return false;
        }
    });
});

Basically catch the page before transition, see if we are on dialog and are going to page1, if so, redirect to page2.

DEMO

Upvotes: 2

Related Questions