title: Jquery mobile : open a page div in dialog from java script
body: <p>I have my jQuery mobile page below. it has the form with the text field and a div which i need to show as dialog which is on the same page(div with id "dialog1" ) after a form submit by java script.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;title&lt;/title&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="/themes/site_theme/css/mobile.css" /&gt;
    &lt;link rel="stylesheet" href="/themes/site_theme/css/jquery.mobile-1.2.0.css" /&gt; 
    &lt;script src="/themes/site_theme/js/jquery-1.7.1.min.js"&gt;&lt;/script&gt; 
    &lt;script src="/themes/site_theme/js/jquery.mobile-1.2.0.js"&gt;&lt;/script&gt; 
    &lt;script src="/themes/site_theme/js/min.js"&gt;&lt;/script&gt; 
  &lt;/head&gt;
  &lt;body&gt;&lt;div data-role="page" id="registerPage"&gt;
  &lt;div data-role="header"&gt;
          &lt;a href="/app/index" data-icon="home" data-theme="b"&gt;Home&lt;/a&gt;
          &lt;h1&gt;Brand List&lt;/h1&gt;
          &lt;a href="#"  data-role="button" data-rel="back" data-icon="arrow-l"data-theme="b"&gt;Back&lt;/a&gt; 
  &lt;/div&gt;
      &lt;div data-role="content"&gt;
                  &lt;form data-ajax="false" id="textForm" &gt;
                  &lt;textarea name="comments" id="comments" placeholder='Type your comments'  size="85"&gt;&lt;/textarea&gt;
                  &lt;div  align="center"&gt;
                      &lt;input data-mini="true" data-inline="true" type="button" value="Submit" onClick="javascript: formText();" /&gt;
                      &lt;input type="hidden"  name="company_id"  value="3" &gt;
                      &lt;input type="hidden"  name="branch_id"   value="3" &gt;
                      &lt;input type="hidden"  name="campaign_id" value="6" &gt;
                  &lt;/div&gt;
              &lt;/form&gt;
  
  &lt;/div&gt;
  
  
  &lt;div data-role="dialog" id="dialog1" class="app-dialog"&gt;
          &lt;div data-role="header"&gt;
               &lt;h3&gt;A dialog&lt;/h3&gt;
          &lt;/div&gt;
              &lt;div id="content" data-role="content"&gt;
                     &lt;p&gt;I am a dialog....!&lt;/p&gt;
          &lt;/div&gt;
     &lt;/div&gt;
  
  
  
          &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>