jQuery Mobile dialog closes immediately
Question
I know that this topic is well known, but all solutions I found don't solve my case. I tried to create a fiddle for this, but it seems that I don't have the know-how to setup it correctly: http://jsfiddle.net/tMKD3/6/ . I simplified the code to demonstrate the problem more simplified.
So I describe it here and I hope it is understandable. I have a jQuery Mobile page and a dialog. With onMouseUp event a javascript function should be called, which does something and opens the dialog. The dialog should stay open until the close button is clicked and then the start page is showed again. In my case the dialog closes immediately.
Here the HTML code:
<body>
<div data-role="page" id="start" data-theme="e">
<div data-role="header" data-position="fixed" data-theme="e">
<h1 id="startHeader"></h1>
</div>
<div data-role="content">
<a href="#page" id="buttonP1" onMouseUp="setup()" data-iconpos="right" data-role="button" data-prefetch data-mini="true"></a>
<a href="#page" id="buttonP2" onMouseUp="setup()" data-iconpos="right" data-role="button" data-prefetch data-mini="true"></a>
<a href="#page" id="buttonP3" onMouseUp="setup()" data-iconpos="right" data-role="button" data-prefetch data-mini="true"></a>
</div>
</div>
<!-- Dialog -->
<div data-role="dialog" id="dialog" data-theme="e">
<div data-role="header" data-theme="e" data-position="fixed" data-close-btn="none">
<h3 id="dialogHeader"></h3>
</div>
<div data-role="content" data-theme="e">
<a href="#start" type="button" data-role="button" id="dialogButton" data-rel="back"></a>
</div>
</div>
Here the javascript code:
$(document).ready(function(){
// set button text
$("buttonP1").text("Test");
$("buttonP2").text("Test");
$("buttonP3").text("Test");
});
function setup() {
// set dialog header text
$("dialogHeader").text("Dialog");
$("dialogButton").text("Close");
// call dialog and the dialog should stay opened until the close button is pressed
$.mobile.changePage('#dialog', {
transition: 'pop',
role: 'dialog'
});
return false;
// after calling the dialog I do some additional stuff like reset some counters and so on
}
In similar articles I found the problem was the forgotten return false; , but here it doesn't helps. Has somebody an idea what I did wrong and where the mistake is?
Thank you very much in advance for your help.
Greetings, Thomas
1 answers
solution1
1 ACCPTED 2013-08-23 09:31:49
you can give a timeout for this:
<script>
$(document).ready(function(){
// set button text
$("#buttonP1").text("Test");
$("#buttonP2").text("Test");
$("#buttonP3").text("Test");
});
function setup() {
// set dialog header text
$("#dialogHeader").html("Dialog");
$('#dialogButton').html('Close');
// call dialog and the dialog should stay opened until the close button is pressed
setTimeout(function () {
$.mobile.changePage('#dialog', {
transition: 'pop',
role: 'dialog'
});
}, 100);
return false;
// after calling the dialog I do some additional stuff like reset some counters and so on
}
</script>
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.