You can try the solution below.
Please note that a full working example (code + screenshots) is provided at the end of the message ...
1 - Add a class ( ex: myopt ) to all of your options in the #popupStatus .
An example with two more options ( Validate and Cancel ):
<div data-role="popup" id="popupStatus" data-theme="c" data-overlay-theme="a" style="max-width: 500px;"> <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"> <h1>Status</h1> </div> <div data-role="content" data-theme="d" data-backbtn="false"> <h3>Choose an Action:</h3> <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 the ID attribute ( for example: #popup_option ) for your pop-up window in which the message Are you sure? , and specify the <span> (for example: <span id="myoption"></span> ) that will contain the dynamic message that you want to "integrate" (according to the parameter that you select from the #popupStatus popup window ):
<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>
3 - Define the following click event function for the parameters of your #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 above function performs the following actions:
First, it selects the index of the selected parameter in the #popupStatus and saves it in the variable ind . ind will be 1 , 2 or 3 if you click the Change , Validate or Cancel button (respectively).
The toset variable is the content that we want to dynamically "integrate" inside the #popup_option , depending on the parameter that we previously clicked on the #popupStatus . It is initially set to "" .
From the switch in the code, we set the value of the toset variable to Change , Validate or Cancel , depending on the option we selected by default -up #popupStatus .
We include the toset value / content inside the <span> tag inside the #popup_option popup using $("#myoption").html(toset);
Close the #popupStatus pop-up window and open #popup_option , which contains the dynamically generated message ( Change , Validate or Cancel ).
We noticed that we need to open the #popup_option popup using the setTimeout function. You cannot directly open it with $( '#popup_option' ).popup( 'open', { transition: "flow" } ); because the popup chain is not allowed.
You can check out the online document that mentions the following :
Currently, the framework does not support the pop-up chain, so it is not possible to embed a link from one pop-up to another pop-up. All links with data-rel = "popup" inside the popup will do nothing at all.
This also means that custom selection menus will not work inside pop-ups because they themselves are implemented using pop-ups. If you place a select menu inside the pop-up window, it will appear as your own menu selection, even if you specify data-native-menu = "false" .
A workaround for getting chained pop-ups is to use the timeout as an example in the popupafterclose event associated with the calling pop-up. In the following example, when the first popup is closed, the second will be opened by deferring a 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> <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> <div data-role="popup" id="popupStatus" data-theme="c" data-overlay-theme="a" style="max-width: 500px;"> <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"> <h1>Status</h1> </div> <div data-role="content" data-theme="d" data-backbtn="false"> <h3>Choose an Action:</h3> <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> <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> </div> </body> </html>
Test Screenshots:
Opening page:
After clicking the button shown above:
After selecting the Validate option:
Hope this helps. Let me know if you have any questions :).