Can not Get Dialog programmatisch in JQuery Mobile zeigt

Ich versuche, ein div mit Datentyp 'Dialog' zu bekommen in JQuery Mobile angezeigt wird, durch ein Javascript-Ereignis ausgelöst. Der Klick auf die Schaltfläche im folgenden Beispiel dient lediglich dazu, das Ereignis auszulösen.Can not Get Dialog programmatisch in JQuery Mobile zeigt

<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>

Die console.log-Ausgabe wird korrekt ausgelöst, aber nichts, was ich tun kann, scheint den Dialog zur Anzeige zu bringen.

Jede Hilfe wird geschätzt.

Danke,

Quelle

2013-04-11 JonRed

Setzen Sie das 'dialog' div außerhalb der' data-role = page'. Nur Popups können innerhalb von 'data-role = page' eingefügt werden. Behandle es als "Seite", aber mit "Daten-Rolle = Dialog". – Omar

Arbeitsbeispiel: 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' 
     }); 
    }); 
});

Dialog auf einer gleichen Ebene wie eine Seite und nicht ein Teil der Seite sein muss. In diesem Fall habe ich den Dialog außerhalb einer Seite verschoben.

Quelle

2013-04-11 10:52:02 Gajotres

Akzeptieren dieser Antwort wegen der gründlichen jfiddle. Danke euch beiden. – JonRed

Sie sollten $ (document) .ready nicht mit jQM verwenden, Sie sollten $ (document) .on ("mobileinit", function() { // Überschreibungen hier anwenden verwenden }); http://api.jquerymobile.com/global-config/ –

Ihre Struktur sollte so aussehen, data-role=dialog außerhalb 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 -->

Quelle

2013-04-11 10:55:33 Omar

Große Antworten auf beide Omar und @Gajotres. Danke - es funktioniert. Aber ich habe versucht, diesen Dialog und den $ (‚# addCatForm‘) zu schließen. Dialog (‚close‘) Funktion nicht zu verhalten scheint, wie ich erwarten würde. Wie schließe ich diesen Dialog mit Zugriff auf seine DOM-Elemente? Vielen Dank. – JonRed

@JonRed, wenn Sie es schließen, geht es zurück zu '# mainpage'? – Omar

wenn Sie möchten, fügen Sie zurück zur vorherigen Seite gehen 'data-rel =„zurück“' Attribut '# addCatForm' div. @JonRed – Omar

Can not Get Dialog programmatisch in JQuery Mobile zeigt

Antwort

Verwandte Themen