web-dev-qa-db-ja.com

JavaScriptからjQuery Mobileダイアログを開く方法は？

ダイアログページがあり、それを開いて、AJAX POSTからの結果を表示しようとしています。

これが私のjQuery成功イベントです。

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

私のHTMLには2つのページがあり、2番目はダイアログ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は機能しており、要素id = "text"は "SPAM and EGGS！"で更新されていますが、ダイアログはポップアップしません。

ajaxpostdialogpopupjquery-mobile
37
Will Curran

ページの任意の場所に_<a>_タグを追加します。以下に示すように、ダイアログのidをhrefとして入力します。_<a id='lnkDialog' href="#dialog" data-rel="dialog" data-transition="pop" style='display:none;'></a>_

成功イベント内の$("#dialog").dialog();を$("#lnkDialog").click();に置き換えます

54
codef0rmer

これはもっとエレガントだと思います。

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

hTMLにdata-role="dialog"の代わりにpage

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

この答えも機能します：

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

「ダイアログ」または「ポップアップ」を使用することが重要でない場合は、これを試してください：

$("#dialog").popup('open');
20
Ahmet Mehmet

最新のクエリバージョンの正しい方法

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

JQM 1.4では、changePageは廃止され、1.5で削除されます（ http://api.jquerymobile.com/jQuery.mobile.changePage/ ）

彼らは、代わりにpagecontainerのchange()メソッドを使用することを提案しています。

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