There is a jquery mobile submit form
which I am using to save values into the SQL database
.
Once the values are stored successfully in DB a popup is opened.
The problem being that the popup doesn't open when the submit button is clicked. I need to click 2 times for the popup to open which in turn would have added 2 database entries.
Code :
<script type="text/javascript" >
function BuyerDetails() {
var keys = new Array();
keys[0] = $('#boardingPassId').val();
keys[1] = $('#MainContent_totalPrice').val();
keys[2] = document.getElementById("select-choice-a").options[document.getElementById("select-choice-a").selectedIndex].text;
keys[3] = $('#email').val();
keys[4] = $('#Username').val();
keys[5] = $('#Feedback').val();
PageMethods.AddToBuyers(keys, onSuccess, onFailure);
}
function onSuccess(result) {
$('#popupDiv').popup("open");
}
function onFailure(error) {
alert(error);
}
</script>
HTML code
<div id="page" data-role="page">
<div data-theme="a" data-role="header" data-position="fixed">
<h3 style="color: white;">Confirmation
</h3>
<a data-role="button" onclick="javascript:history.back()" class="ui-btn-left">Back</a>
<a style="color: white;" data-role="button" data-ajax="false" href="Default.aspx">Home</a>
</div>
<div data-role="content">
<div class="content-primary">
<ul data-role="listview" data-inset="true">
<li data-role="fieldcontain">
<label for="email">
Boarding pass Number</label>
<input id="boardingPassId" type="text" name="input" value="" />
</li>
<li data-role="fieldcontain">
<label for="email">
Name</label>
<input id="Username" type="text" name="input" value="" />
</li>
<li data-role="fieldcontain">
<label for="email">
Total Price</label>
<input type="text" name="input1" runat="server" id="totalPrice" readonly="readonly" />
</li>
<li data-role="fieldcontain">
<label for="email" class="select">
Payment Method</label>
<select name="select-choice-a" id="select-choice-a" data-native-menu="false" style="width: 500px;">
<option value="card">Card</option>
<option value="cash">Cash</option>
</select>
</li>
<li data-role="fieldcontain">
<label for="email">
Feedback(possible improvement/suggestions)</label>
<textarea cols="40" rows="8" name="textarea" id="Feedback"></textarea>
</li>
<li data-role="fieldcontain">
<label for="email">
Email id</label>
<input type="text" name="email" id="email" value="" />
</li>
<li class="ui-body ui-body-b">
<fieldset class="ui-grid-a">
<div class="ui-block-a">
<button type="submit" data-theme="d">
Cancel</button>
</div>
<div class="ui-block-b">
<button type="button" onclick="BuyerDetails()" data-theme="a">
Submit</button>
</div>
</fieldset>
</li>
</ul>
</div>
<div class="content-secondary">
<div data-role="popup" id="popupDiv" data-theme="d" data-overlay-theme="b" class="ui-content"
style="max-width: 340px;">
<span id="dialog_title_span">Thank You</span>
<p>
Your order has been placed
</p>
<a id="productPrice" data-role="button" data-theme="b" data-icon="check" data-inline="true"
href="Default.aspx" data-mini="true">DONE</a>
</div>
</div>
</div>
</div>
Any help would be greatly appreciated.
jQuery Mobile popup is little bit buggy, mostly if executed under the Chrome browser.
Classic fix is to put this line:
$('#popupDiv').popup("open");
inside a setTimeout function:
setTimeout(function(){
$('#popupDiv').popup("open");
},100);
1ms should be enough, but you should also test with other values.
I also made you a working example: http://jsfiddle.net/Gajotres/4yvBK/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.