Show raw jquery mobile simple dialog above another raw jquery mobile simple dialog

Question

Please see the attached image

In my page i have home icon. When i click "Home" i will show one dialog by jQuery mobile simple dialog. I achieved this successfully. I used raw html mode simple dislog (http://dev.jtsage.com/jQM-SimpleDialog/demos/blank.html)

When user clicks ok button in simple dialog without select any check box i want to show warning dialog through jquery mobile simple dialog like the below

I want to show this dialog above the select customer dialog. How can i achieve this.

I tried to create jsfiddle example but the design is little bit tough not able to create.

When the warning dialog comes select customer dialog disappears. Please give any suggstion.

Answer 1

UPDATE: just realized you are using the simpledialog plugin and not the native jQM dialog.

Using SimpleDialog2

ForSimpleDialog2 see this fiddle I created.

In the main jQM page there is a link for launching the checkbox dialog which is included in the HTML markup as inline content:

$(document).delegate('#inliner', 'click', function() {
    $('#inlinecontent').simpledialog2({themeDialog: 'c'});
});
<a href="#" id="inliner" data-role="button" >Open dialog</a>

<div id="inlinecontent" style="display:none" data-  options='{"mode":"blank","headerText":"Dialog","headerClose":false,"blankContent":true}'> 
<div  style="padding: 15px;">       
    <fieldset id="cBoxes" data-role="controlgroup" >
        <legend>My CheckBoxes:</legend>
        <input type="checkbox" name="checkbox-v-2a" id="checkbox-v-2a">
        <label for="checkbox-v-2a">One</label>
        <input type="checkbox" name="checkbox-v-2b" id="checkbox-v-2b">
        <label for="checkbox-v-2b">Two</label>
        <input type="checkbox" name="checkbox-v-2c" id="checkbox-v-2c">
        <label for="checkbox-v-2c">Three</label>
    </fieldset>
    <a id="dialogSubmit" href="#"  data-role="button">Close Dialog</a>          
    </div>
</div>

When you click the Close Dialog button, it uses Omar's code to check if any checkboxes are checked. If they are, it just closes the dialog returning to the main page. If none are checked, it launches an error dialog:

$(document).delegate('#dialogSubmit', 'click', function() {
    var numChecked = $('#cBoxes').find('[type=checkbox]:checked').length;
    if (numChecked > 0){
        $(document).trigger('simpledialog', {'method':'close'});
    } else {
      $('<div>').simpledialog2({
        mode: 'blank',
        headerText: 'Warning',
        headerClose: true,
        themeDialog: 'e',
        blankContent : 
          "<div style='padding: 15px;'><p>Please select at least one checkbox first.</p>"+
          // NOTE: the use of rel="close" causes this button to close the dialog.
          "<a rel='close' data-role='button' href='#'>OK</a></div>"
     });        
   }
});

To accomplish the same with the native jQM dialog:

I have created a fiddle demonstrating chained dialogs according to my understanding of your problem.

Basically, from the first page you click a link button:

<a href="#foo" data-rel="dialog" data-role="button" data-transition="flow">Open dialog</a>

to launch a dialog. This dialog includes 3 checkboxes and a 'submit' button:

<div id="foo" data-role="page" data-close-btn="none">
    <div data-role="header">
        <h1>Dialog Header</h1>
    </div>    
    <div data-role="content">        
      <fieldset id="cBoxes" data-role="controlgroup">
        <legend>My CheckBoxes:</legend>
        <input type="checkbox" name="checkbox-v-2a" id="checkbox-v-2a">
        <label for="checkbox-v-2a">One</label>
        <input type="checkbox" name="checkbox-v-2b" id="checkbox-v-2b">
        <label for="checkbox-v-2b">Two</label>
        <input type="checkbox" name="checkbox-v-2c" id="checkbox-v-2c">
        <label for="checkbox-v-2c">Three</label>
      </fieldset>        
      <a id="dialogSubmit" href="#"  data-role="button">Close Dialog</a>        
    </div>
</div>

When you click '#dialogSubmit', it uses Omar's code to check if any checkboxes are checked. If they are, it just closes the dialog returning to the main page. If none are checked, it launches an error dialog.

$('#dialogSubmit').on("click", function(){
  var numChecked = $('#cBoxes').find('[type=checkbox]:checked').length;
  if (numChecked > 0){
    $("#foo").dialog( "close" );
  } else {
    $.mobile.changePage( "#error", { role: "dialog" } );
  }
});

The error dialog simply has a close button with data-rel="back" so that clicking it returns to the previous dialog allowing you to select a checkbox.

<div id="error" data-role="page" data-theme="e">
   <div data-role="header">
      <h1>Dialog Error</h1>
   </div>  
   <div data-role="content">          
      <p>Please select at least one checkbox first.</p>        
      <a id="errorOK" href="#"  data-role="button" data-rel="back">OK</a>
   </div>   
</div>