Как открыть jQuery Mobile Dialog из javascript? - PullRequest
37 голосов
/ 03 июня 2011

У меня есть диалоговая страница, и я пытаюсь открыть ее и отобразить результаты 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!", но диалоговое окно не появляется.

Ответы [ 6 ]

66 голосов
/ 29 ноября 2011

Я думаю, что этот вариант гораздо элегантнее:

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

вы должны иметь в своем HTML data-role="dialog" вместо page

<div data-role="dialog" id="dialog">...</div>
54 голосов
/ 19 июня 2011

Добавьте <a> тег в любом месте на вашей странице, просто введите идентификатор своего диалога в виде href, как показано ниже: <a id='lnkDialog' href="#dialog" data-rel="dialog" data-transition="pop" style='display:none;'></a>

И замените $("#dialog").dialog(); внутри вашего события успеха на $("#lnkDialog").click();

49 голосов
/ 09 января 2012

Этот ответ также работает:

    $.mobile.changePage('#myPage', {transition: 'pop', role: 'dialog'});   
20 голосов
/ 13 декабря 2012

, если не важно использовать «диалог» или «всплывающее окно», попробуйте это:

$("#dialog").popup('open');
5 голосов
/ 19 декабря 2013

правильный путь с последней версией запроса

$.mobile.changePage("#dialog", { transition: "pop",role: "dialog" })
1 голос
/ 29 января 2015

Начиная с JQM 1.4, changePage устарела и будет удалена через 1.5 (http://api.jquerymobile.com/jQuery.mobile.changePage/)

Они предлагают использовать вместо change() метод pagecontainer.

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