jQM 1.4 chained popups using SimpleDialog2

by Erik Zanker

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<link rel="stylesheet" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css">
<script src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog2.js"></script>
<!-- the page markup -->
<div data-role="page" id="page1">
    <div data-role="header" data-position="fixed">
         <h1>SimpleDialog2 Chained Popup</h1>
    </div>
    <div class="ui-content" role="main">
        <!-- button that opens the popup -->
        <button id="openPopup">Select One or More Item(s)...</button>
    </div>	
</div>

<!-- the popup markup -->
<div id="inlinecontent" style="display:none" > 
	<div  style="padding: 15px;">       
		<fieldset id="cBoxes" data-role="controlgroup" >
			<legend>Favorite Fruit:</legend>
			<input type="checkbox" name="checkbox-v-2a" id="checkbox-v-2a" />
			<label for="checkbox-v-2a">Apple</label>
			<input type="checkbox" name="checkbox-v-2b" id="checkbox-v-2b" />
			<label for="checkbox-v-2b">Banana</label>
			<input type="checkbox" name="checkbox-v-2c" id="checkbox-v-2c" />
			<label for="checkbox-v-2c">Orange</label>
		</fieldset>
		<div class="ui-grid-a">
			<div class="ui-block-a"><button id="dialogSubmit" data-theme="b">OK</button></div>
			<div class="ui-block-b"><button id="dialogCancel" rel='close'>Cancel</button></div>
		</div>
	</div>
</div>

CSS

.ui-simpledialog-screen-modal{
    opacity: 0.4;
}
.ui-simpledialog-container {
    border: 1px solid rgb(221, 221, 221) !important;
}
.ui-grid-a > div {
    padding: 2px;
}

JavaScript

$(document).on("pagecreate", "#page1", function () {

    $(document).on('click', '#openPopup', function() {
        $('#inlinecontent').simpledialog2({
            mode: "blank",
            headerText: "Select Item(s)",
            headerClose: false,
            blankContent: true,
            themeDialog: 'a',
            width: '75%',
            zindex: 1000
        });
    });
    
    $(document).on('click', '#dialogSubmit', 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,
            transition: 'flip',
            themeDialog: 'b',
            zindex: 2000,
            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>"
          });        
        }
    });
    
});