Programmatically Open a Dialog in JQuery Mobile

Question

I have a single .html file that looks similar to the following:

<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 a custom message in the text of my dialog and open the dialog. For some reason, I have been unable to open the myDialog. For the life of me, I cannot figure out what I'm doing wrong. I have reviewed 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 role of the page to 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 with

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

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