Programmatically open a dialog in jQuery Mobile

Question

I have one .html file that looks something like this:

<div id="myPage" data-role="page"> <div data-role="header"> <a href="#" data-icon="arrow-l" data-iconpos="notext" class="ui-btn-left jqm-home" onclick="backButton_Click();">Back</a> <h1>My App</h1> </div> <div> <input id="saveButton" type="button" value="Save" onclick="doStuff()" /> </div> <script type="text/javascript"> function doStuff() { var updatedText = getUpdatedText(); $("#myMessage", "#myDialog").html(updatedText); $.mobile.changePage("#myDialog", { role: "dialog" }); } </script> </div> <div id="myDialog" data-role="page"> <div id="myMessage"></div> <input id="button1" type="button" value="Button 1" data-theme="b" onclick="someJS1();" /> <input id="button2" type="button" value="Button 2" data-theme="c" onclick="someJS2();" /> </div> 

When doStuff () is called, I want to set up a custom message in the text of my dialog and open the dialog. For some reason, I could not open myDialog. For my life, I cannot understand what I am doing wrong. I looked at the content posted here: http://jquerymobile.com/demos/1.0a4.1/docs/pages/docs-pages.html

Answer 1

I think you need to set the page role in the dialog

 <div id="myDialog" data-role="dialog"> <div id="myMessage"></div> <input id="button1" type="button" value="Button 1" data-theme="b" onclick="someJS1();" /> <input id="button2" type="button" value="Button 2" data-theme="c" onclick="someJS2();" /> </div> 

And then open the dialog

 $.mobile.changePage("#myDialog"); 

See Fiddle http://jsfiddle.net/kYsVp/2/