ajax - How to open a jQuery Mobile Dialog from javascript?

Question

I have a dialog page and am trying to open it and display results from an AJAX POST.

Here is my jQuery success event:

success: function(resp) {                               
  $("#dialog").dialog();
  $("#text").html('SPAM and EGGS!')
}       

My HTML has two pages, the second being the dialog html:

<div data-role="page" id="main">
  # content 
</div>
<div data-role="page" id="dialog">
  <div data-role="header">
    <h1>Your Message</h1>
  </div>    
  <div data-role="content" id="text">
  </div>    
</div>

My AJAX POST is working and element id="text" is being updated with "SPAM and EGGS!", but the dialog is not popping up.

question from:https://stackoverflow.com/questions/6230460/how-to-open-a-jquery-mobile-dialog-from-javascript

Answer 1

Add <a> tag anywhere in your page, just put your dialog's id as href as shown below: <a id='lnkDialog' href="#dialog" data-rel="dialog" data-transition="pop" style='display:none;'></a>

And replace $("#dialog").dialog(); inside your success event with $("#lnkDialog").click();