如何从JavaScript打开jQuery Mobile对话框？

Question

我有一个对话框页面，并尝试打开它并显示来自 AJAX POST 的结果。

以下是我的 jQuery 成功事件：

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

我的HTML有两个页面，第二个是对话框的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>

我的 AJAX POST 工作正常，元素 id="text" 被更新为 "SPAM and EGGS!"，但是对话框没有弹出。

- Will Curran

---

相关内容：https://dev59.com/FG025IYBdhLWcg3wST6Q 和可能的 https://dev59.com/7VbUa4cB1Zd3GeqPB8gc#5870158 - Phill Pafford

尝试使用innerHTML，这可能会解决问题。 - Games Brainiac

Answer 1

我认为这个更加优雅:

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

你应该在你的HTML中使用 data-role="dialog" 而不是 page

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

- Tombart

---

绝对是更优雅的解决方案。 刚试过了，它可行。 - memical

对我来说不起作用。JQM在页面切换时会出现奇怪的问题，导致“x”功能失效。接受的解决方案实际上是有效的（只需将链接隐藏在某个地方）。 - Kevin

好东西，谢谢。只要您建议的对话框具有正确的数据角色，这也可以正常工作。做得好。 $.mobile.navigate("#dialog"); - B-Money

Answer 2

在您的页面任何位置添加<a>标签，只需将对话框的id作为href插入，如下所示：<a id='lnkDialog' href="#dialog" data-rel="dialog" data-transition="pop" style='display:none;'></a> 并且在成功事件内替换$("#dialog").dialog();为$("#lnkDialog").click();。

- codef0rmer

---

你好CodeF0rmer，能告诉我内容放在哪里吗？是在$("#lnkDialog").html( someContent )吗？提前感谢，祝您编码愉快 :) - Babak Bandpay

不，#lnkDialog只是一个占位符，用于打开对话框。在这种情况下，您的内容将在#dialog中。 - codef0rmer

Answer 3

这个答案也可以：

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

- Joseph Anderson

---

哇，这个真的有效！比上述提到的方法好多了！ - suDocker

官方文档没有提到这个，太棒了 :S - Akram Berkawy

Answer 4

如果使用“对话框”或“弹出窗口”不是很重要，可以尝试这样做：

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

- Ahmet Mehmet

---

$("#dialog").popup(); 或 $("#dialog").popup('open'); 对我来说都可以。 - coyote69

太棒了，这对我起作用了。我也试了一个小时！ - Scoota P

这是基于JQM文档的真正解决方案！ - azerafati

Answer 5

最新的查询版本中正确的方式

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

- Grumpy

Answer 6

自JQM 1.4版本起，changePage已被弃用，并将在1.5中移除(http://api.jquerymobile.com/jQuery.mobile.changePage/)。他们建议使用pagecontainer的change()方法代替。

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

- brixenDK