CODEWITHSUNDEEP
ajaxpostdialogpopupjquery-mobile
Will Curran
Will Curran

Reputation: 7110

How to open a jQuery Mobile Dialog from javascript?

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.

Upvotes: 37

Views: 95079

Answers (6)

brixenDK
brixenDK

Reputation: 351

As of JQM 1.4 the changePage has been deprecated, and will be removed in 1.5 (http://api.jquerymobile.com/jQuery.mobile.changePage/)

They suggest that one should use the change() method of pagecontainer instead.

$.mobile.pageContainer.pagecontainer("change", "#dialog", { transition: 'pop', role: "dialog" });

Upvotes: 1

codef0rmer
codef0rmer

Reputation: 10520

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();

Upvotes: 54

Grumpy
Grumpy

Reputation: 2243

correct way with latest query version

$.mobile.changePage("#dialog", { transition: "pop",role: "dialog" })

Upvotes: 5

Ahmet Mehmet
Ahmet Mehmet

Reputation: 288

if it is not important to use "dialog" or "popup", try this:

$("#dialog").popup('open');

Upvotes: 20

Joseph Anderson
Joseph Anderson

Reputation: 4144

This answer also works:

    $.mobile.changePage('#myPage', {transition: 'pop', role: 'dialog'});

Upvotes: 49

Tombart
Tombart

Reputation: 32388

I think that this one is much more elegant:

$.mobile.changePage('#dialog', 'pop', true, true);

you should have in your html data-role="dialog" instead of page

<div data-role="dialog" id="dialog">...</div>

Upvotes: 68

Related Questions