CODEWITHSUNDEEP
javascriptjquerydialogpopup
AnR
AnR

Reputation: 2215

Opening Dialog from within a Dialog in JQuery Mobile

I am trying to open a Dialog from within a Dialog without Success.

Here is my html:

<a href="#popupDialog" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-transition="pop" data-icon="delete" data-theme="b">Delete page...</a>
<div data-role="popup" id="popupDialog" data-overlay-theme="a" data-theme="c" data-dismissible="false" style="max-width:400px;">
    <div data-role="header" data-theme="a" class="ui-corner-top">
        <h1>Delete Page?</h1>
    </div>
    <div data-role="content" data-theme="d" >
        <h3 class="ui-title">Are you sure you want to delete this page?</h3>
        <p>This action cannot be undone.</p>
        <a href="#" data-role="button" data-rel="back" data-theme="c">Cancel</a>
        <a data-role="button" data-rel="back" data-transition="flow" data-theme="b" onclick="NewDialog();">Open New Dialog</a>
    </div>
</div>


<div data-role="popup" id="popupDialog1" data-overlay-theme="a" data-theme="c" data-dismissible="false" style="max-width:600px;">
    <div data-role="header" data-theme="a" class="ui-corner-top">
        <h1>Top Delete Page?</h1>
    </div>
    <div data-role="content" data-theme="d" >
        <h3 class="ui-title">Dialog Called from A Dialog</h3>
        <p>This action cannot be undone.</p>
        <a href="#" data-role="button" data-rel="back" data-theme="c">Option-1</a>
        <a href="#" data-role="button" data-rel="back" data-transition="flow" data-theme="b">Option-2</a>
    </div>
</div>

And here is the a small js function:

function NewDialog()
{
    //alert("Alert-1");
    ("#popupDialog1").popup("open");

}

Any idea how can I call the second dialog successfully?

JS Fiddle is here

Upvotes: 0

Views: 262

Answers (1)

rockStar
rockStar

Reputation: 1296

You need to set the first popups second button which is the open new dialog to popup. And set its data-rel instead of data-rel="back" set it to data-rel="popup" and also provide a reference to what you want to popup which is the href --> href="#popupDialog1"

here's a Fiddle with a popup within popup --> http://jsfiddle.net/EWQ6n/520/

And btw you can remove the onClick event you have setup.

Upvotes: 1

Related Questions