JQuery Mobileでプログラムでダイアログを表示できない

Javascriptイベントで発生したJQuery Mobileで表示するデータ型 'ダイアログ'でdivを取得しようとしています。下の例のボタンをクリックするだけで、イベントが発生します。JQuery Mobileでプログラムでダイアログを表示できない

<head> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" /> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      //$.mobile.changePage('#addCatForm'); 

      $('#createEvent').click (function() { 
       console.log('Prove event fired'); 

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

     }); 
    </script> 
</head> 
<body> 
    <div data-role="page" id="mainPage"> 
     <button id="createEvent">Create Event</button> 
     <div data-role="dialog" id="addCatForm" data-theme="c"> 
      <p>here is some text</p> 
      <div data-role="content"> 
       <input type="text" id="catText" data-theme="c"/> 
       <input data-role="button" data-mini="true" data-theme="b" data-inline="true" type="submit" id="addCat" value="Add Category"> 

       <button data-role="button" data-mini="true" data-theme="c" data-inline="true" id="canCat">Cancel</button> 
      </div> 
     </div> 
    </div>  
</body>

console.logの出力は正しく発生しますが、表示するダイアログが表示されないようです。

助けてください。

は、

出典

2013-04-11 JonRed

'dialog-div 'を' data-role = page'の外に置きます。 'data-role = page'の中にポップアップだけを挿入することができます。それを 'page'として扱いますが、代わりに' data-role = dialog'を使ってください。 – Omar

の作業例をありがとう：http://jsfiddle.net/Gajotres/Jx9xM/

$(document).ready(function() {  
    $('#createEvent').click (function() { 
     console.log('Prove event fired'); 

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

をダイアログがページではなくページの一部と同じレベルにある必要があります。私はこの場合、ページの外にダイアログを移動しました。

出典

2013-04-11 10:52:02 Gajotres

完全なjsfiddleのためにこの回答を受け入れてください。あなたがた両方に感謝します。 – JonRed

$（document）.readyをjQMと一緒に使用しないでください。$（document）.on（ "mobileinit"、function（）{ //ここで上書きを適用してください） }）; http://api.jquerymobile.com/global-config/ –

あなたの構造は、data-role=dialogの外側のdata-role=pageのようになります。

<!-- Page --> 
<div data-role="page" id="mainPage"> 
<button id="createEvent">Create Event</button> 
</div> 
<!-- /Page --> 

<!-- Dialog --> 
<div data-role="dialog" id="addCatForm" data-theme="c"> 
<p>here is some text</p> 
<div data-role="content"> 
    <input type="text" id="catText" data-theme="c"/> 
    <input data-role="button" data-mini="true" data-theme="b" data-inline="true" type="submit" id="addCat" value="Add Category"> 
    <button data-role="button" data-mini="true" data-theme="c" data-inline="true" id="canCat">Cancel</button> 
    </div> 
</div> 
<!-- /Dialog -->

出典

2013-04-11 10:55:33 Omar

Omarと@Gajotresの両方にすばらしい回答。ありがとう - それは動作します。しかし、私はこのダイアログを閉じようとしていましたが、$（ '＃addCatForm'）ダイアログ（ 'close'）関数は期待通りに動作していないようです。 DOM要素へのアクセスでこのダイアログを閉じるにはどうすればよいですか？ありがとうございました。 – JonRed

@JonRed閉じると、 '＃mainpage'に戻りますか？ – Omar

前のページに戻る場合は、 'data-rel =" back "属性を'＃addCatForm' divに追加してください。 @JonRed – Omar

JQuery Mobileでプログラムでダイアログを表示できない

答えて

関連する問題