Question

I have a jQuery Mobile pop-up box like so (see code below), and need to add a dialog box to each option that prompts “Are you sure?” OK or Cancel:

(Note: I temporarily removed all options except the first to make the code cleaner)

<!--- Status, Suspend, Restore, Disconnect popup dialog box --->
<div data-role="popup" id="popupStatus" data-overlay-theme="a" data-theme="c"         
    style="max-width:500px;" class="ui-corner-all">
    <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete"     data-iconpos="notext" class="ui-btn-right">Close</a>
    <div data-role="header" data-theme="a" class="ui-corner-top">
        <h1>Status</h1>
    </div>
    <div data-role="content" data-theme="d" 
        class="ui-corner-bottom ui-content" data-backbtn="false">
        <h3 class="ui-title">Choose an Action:</h3>
        <a href="edit_ttStatus.cfm?id=<cfoutput>#rsTicketDetail.ttNum#</cfoutput>&id1=<cfoutput>#rsTicketDetail.sta#</cfoutput>" class="ui-corner-all" data-role="button" data-inline="false"  data-transition="flow" data-theme="b">Change</a> 
    </div>      
</div>

Here is the code for the Dialog, but I’m not sure how to “integrate” it with the above code:

<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
    <h3 class="ui-title">Are you sure?</h3>
    <p>This action will ________ the ticket.</p>
    <a href="#" class="ui-corner-all" data-role="button" data-inline="true" data-rel="back" data-theme="c">Cancel</a>    
    <a href="#" class="ui-corner-all" data-role="button" data-inline="true" data-transition="flow" data-theme="b">OK</a>  
</div>

Answer 1

You can try the solution below.

Note that a full working example (code + screenshots) is provided in the end of the post…

1 – Add a class (eg: myopt) to all your option inside your pop-up box #popupStatus.

Example with 2 more options (Validate and Cancel):

<div data-role="popup" id="popupStatus" data-theme="c" data-overlay-theme="a" style="max-width: 500px;">

    <!-- BACK BUTTON -->
    <a href="#" data-rel="back" data-role="button" data-theme="a"
        data-icon="delete" data-iconpos="notext" class="ui-btn-right">
        Close
    </a>

    <!--  HEADER -->
    <div data-role="header" data-theme="a">
        <h1>Status</h1>
    </div>

    <!-- CONTENT -->
    <div data-role="content" data-theme="d" data-backbtn="false">
        <h3>Choose an Action:</h3>

        <!-- OPTIONS -->
        <a href="#" class="myopt" 
            data-role="button" data-inline="false" data-theme="b">
            Change
        </a> 

        <a href="#" class="myopt" 
            data-role="button" data-inline="false" data-theme="b">
            Validate
        </a> 

        <a href="#" class="myopt" 
            data-role="button" data-inline="false" data-theme="b">
            Cancel
        </a>
    </div>
</div>

2 – Define an ID attribute (eg: #popup_option) for your pop-up which will prompt the message Are you sure?, and include a <span> tag (eg: <span id="myoption"></span>) which will contain the dynamic message you want to “integrate” (according to the option you select from the pop-up #popupStatus):

<!-- POPUP BOX - FOR OPTIONS -->
<div data-role="popup" id="popup_option" 
    data-theme="a" class="ui-corner-bottom ui-content" data-overlay-theme="a">

    <div data-role="content">
        <h3 class="ui-title">Are you sure?</h3>

        <!-- INLCUDE THE SPAN TAG -->
        <p>This action will <span id="myoption"></span> the ticket.</p>

        <a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c">
            Cancel
        </a>

        <a href="#" class="ui-corner-all" data-role="button" data-inline="true" data-transition="flow" data-theme="b">
            OK
        </a>
    </div>
</div>

3 – Define the following click event function for the options of your pop-up box #popupStatus:

$(".myopt").click(function() {
    var ind = $(this).index();
    var toset = "";

    switch(ind) {
        case 1: 
            toset = "change";
            break;
        case 2:
            toset = "validate";
            break;
        case 3:
            toset = "cancel";
            break;
    };

    $("#myoption").html(toset);

    $( "#popupStatus" ).popup("close");

    setTimeout( function(){ $( '#popup_option' ).popup( 'open', { transition: "flow" } ) }, 100 );
});

The function above does the following:

• It first takes the index of the option that is clicked, in the pop-up box #popupStatus, and store it in the variable ind. ind will equals 1, 2, or 3 if the option Change, Validate, or Cancel is clicked (respectively).

• The variable toset is the content that we want to “integrate” dynamically inside the pop-up box #popup_option, depending on the option we previously clicked in the pop-up #popupStatus. It is initially set to "".

• From the switch statement, in the code, we set the value of the variable toset to change, validate, or cancel, depending on the option we selected from the pop-up #popupStatus.

• We include the value / content of toset inside the <span> tag that is inside the pop-up #popup_option with $("#myoption").html(toset);

• We close the pop-up #popupStatus and open #popup_option which contains the dynamically generated message (change, validate, or cancel).
  We notice that we need to open the pop-up box #popup_option using the setTimeout function. You cannot directly open it using $( '#popup_option' ).popup( 'open', { transition: "flow" } );, because chaining of pop-ups is not allowed.

You can check the online doc which mentions the following:

The framework does not currently support chaining of popups so it’s
not possible to embed a link from one popup to another popup. All
links with a data-rel=”popup” inside a popup will not do anything at
all.

This also means that custom select menus will not work inside popups,
because they are themselves implemented using popups. If you place a
select menu inside a popup, it will be rendered as a native select
menu, even if you specify data-native-menu=”false”.

A workaround to get chained popups working is the use of a timeout for
example in the popupafterclose event bound to the invoking popup. In
the following example, when the first popup is closed, the second will
be opened by a delayed call to the open method:

---

Full example:

<html>
    <head>
        <meta name='viewport' content='minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no' />

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile.structure-1.2.0.min.css" />
        <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/jquery-1.8.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

        <script>
            $(function() {

                $(".myopt").click(function() {
                    var ind = $(this).index();
                    var toset = "";

                    switch(ind) {
                        case 1: 
                            toset = "change";
                            break;
                        case 2:
                            toset = "validate";
                            break;
                        case 3:
                            toset = "cancel";
                            break;
                    };

                    $("#myoption").html(toset);

                    $( "#popupStatus" ).popup("close");

                    setTimeout( function(){ $( '#popup_option' ).popup( 'open', { transition: "flow" } ) }, 100 );

                });
            });
        </script>
    </head>

    <body>

        <!-- YOUR JQUERY MOBILE PAGE -->
        <div data-role="page" id="my_page">
            <div data-role="content">
                <a href="#popupStatus" data-role="button" data-rel="popup" data-position-to="window"> Open
                    Status, Suspend, Restore, Disconnect popup dialog box 
                </a>

                <!--- Status, Suspend, Restore, Disconnect popup dialog box --->
                <div data-role="popup" id="popupStatus" 
                    data-theme="c" data-overlay-theme="a" style="max-width: 500px;">

                    <!-- BACK BUTTON -->
                    <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">
                        Close
                    </a>

                    <!--  HEADER -->
                    <div data-role="header" data-theme="a">
                        <h1>Status</h1>
                    </div>

                    <!-- CONTENT -->
                    <div data-role="content" data-theme="d" data-backbtn="false">
                        <h3>Choose an Action:</h3>

                        <!-- OPTIONS -->
                        <a href="#" class="myopt" 
                            data-role="button" data-inline="false" data-theme="b">
                            Change
                        </a> 

                        <a href="#" class="myopt" 
                            data-role="button" data-inline="false" data-theme="b">
                            Validate
                        </a> 

                        <a href="#" class="myopt" 
                            data-role="button" data-inline="false" data-theme="b">
                            Cancel
                        </a>
                    </div>
                </div>


                <!-- POPUP BOX - FOR OPTIONS -->
                <div data-role="popup" id="popup_option" 
                    data-theme="a" class="ui-corner-bottom ui-content" data-overlay-theme="a">

                     <div data-role="content">
                        <h3 class="ui-title">Are you sure?</h3>

                        <p>This action will <span id="myoption"></span> the ticket.</p>

                        <a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c">
                            Cancel
                        </a>

                        <a href="#" class="ui-corner-all" data-role="button" data-inline="true" data-transition="flow" data-theme="b">
                            OK
                        </a>
                    </div>
                </div>

            </div><!-- content -->
        </div><!-- page -->

    </body>
</html>

Screenshots of testing:

Opening the page:

After clicking on the button shown above:

After selecting the option Validate:

Hope this helps. Let me know if you have any questions :).