CODEWITHSUNDEEP
jquery-mobile
user203687
user203687

Reputation: 7237

load a dialog during loading of a page

I am using jQuery Mobile for developing a simple workflow.

I am switching from Page0 (or Page1) to Page2. I would like to have Page2 to display Page3 (based on a condition) as a dialog before even showing itself. If I click on "cancel" in the dialog (Page3), I would like to return to Page0 (or Page1).

I am able to show the dialog, but it shows after Page2 is shown (like a flicker). Cancel (with data-rel:back) always goes back to Page2 and finally ending up in infinite-loop.

Can anyone help me with this?

I tried my best to explain this. Let me know if this is not completely clear.

Upvotes: 0

Views: 81

Answers (1)

Gajotres
Gajotres

Reputation: 57309

Something like this: http://jsfiddle.net/Gajotres/7RQaM/

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
</head>
<body>
    <div data-role="page" id="page0">
        <div data-theme="a" data-role="header">
            <h3>
                Page 0
            </h3>
            <a href="#second" class="ui-btn-right">Next</a>
        </div>

        <div data-role="content">
            <a href="#page3" data-role="button" data-rel="dialog">Open dialog</a> 
        </div>

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

        </div>
    </div>

    <div data-role="dialog" id="page3">

        <div data-role="header" data-theme="d">
            <h1>Dialog</h1>

        </div>

        <div data-role="content" data-theme="c">
            <h1>What do you want to do?</h1>
            <p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
            <a href="#page2" data-role="button" data-theme="b">Go to page 2</a>       
            <a href="#page0" data-role="button" data-theme="c">Go back to page 0</a>    
        </div>
    </div>    

    <div data-role="page" id="page2">
        <div data-theme="a" data-role="header">
            <a href="#page0" class="ui-btn-left">Back</a>            
            <h3>
                Page 2
            </h3>
        </div>

        <div data-role="content">

        </div>

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

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

You can't show 2 pages at the same time. So the best thing is to show dialog and let user choose what to do.

This is the main problem. You can order page change to page2 and then use some page event (like pagebeforeshow) to instantly switch to page2. Because of how jQM works page2 will show for the brief moment. But even if you can fix this. When you close dialog and it goes back to page2 it will again show a dialog box because its pagebefpreshow is still trying to changePage to dialog box.

EDIT :

I was wrong, it can be done like this:

$('#page3').live('pagebeforeshow',function(e,data){    
    $('[title="Close"]').off();
    $('[title="Close"]').attr('href','#page2');
});

Basically what you want to do is to show dialog without showing page2. And override its closing button to changePage where you want. $('[title="Close"]').off(); is here to remove prior event.

I have also change an example from the top.

Upvotes: 1

Related Questions