Question

I am working on a JQuery Mobile application. Each of my .html files basically has a

<div id="myPage" data-role="page">
  <!-- My Content -->
</div>

Each of my pages will have a couple of dialogs associated with it. Because of this, I thought it would make sense to include those dialog definitions within the same .html file as the page it is associated with. However, all of the JQuery Mobile docs that I see have the dialogs in their own .html files.

Is there a way to define a dialog in the same .html file as a typical page? If so, what is the recommended approach? I know that JQuery mobile does some smart stuff with the DOM to make it perform so well. Because of that, I’m not sure if I do:

<div id="myPage" data-role="page">
  <!-- My Content -->

  <div id="myDialog" data-role="page" data-rel="dialog">
    <!-- My Dialog Conent -->
  </div>
</div>

OR

<div id="myPage" data-role="page">
  <!-- My Content -->
</div>

<div id="myDialog" data-role="page" data-rel="dialog">
  <!-- My Dialog Conent -->
</div>

Even then, I’m not sure how to open the dialog programmatically. Am I way off base here?

Answer 1

yeas you can include dialogs in the same page. e.g.

    <div data-role="page">
        <div id="content" data-role="content">
            <a href="#dialog1" id="some-dialog" data-rel="dialog" data-role="button">Open Dialog</a>
        </div>
    </div>

Dialog Markup:

   <div data-role="dialog" id="dialog1" class="app-dialog">
        <div data-role="header">
             <h3>A dialog</h3>
        </div>
            <div id="content" data-role="content">
                   <p>I am a dialog....!</p>
        </div>
   </div>

For more info visit http://jquerymobile.com/demos/1.0a4.1/docs/pages/docs-pages.html.