Comment ouvrir une boîte de dialogue jQuery Mobile à partir de javascript?

J'ai une page de dialogue et j'essaie de l'ouvrir et d'afficher les résultats d'un POST AJAX.

Voici mon événement jQuery success:

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

Mon HTML a deux pages, la seconde étant le dialogue 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>

Mon message AJAX fonctionne et element id = " text "est mis à jour avec" SPAM and EGGS!"mais le dialogue n'est pas à éclater.

36
demandé sur Matt Ball 2011-06-03 21:20:43

6 réponses

Ajoutez la balise <a> n'importe où dans votre page, placez simplement l'id de votre boîte de dialogue comme href comme indiqué ci-dessous: <a id='lnkDialog' href="#dialog" data-rel="dialog" data-transition="pop" style='display:none;'></a>

Et remplacez $("#dialog").dialog(); dans votre événement de réussite par $("#lnkDialog").click();

53
répondu codef0rmer 2014-05-26 10:17:50

Je pense que c'est beaucoup plus élégant:

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

, Vous devriez avoir dans votre code html data-role="dialog" au lieu de page

<div data-role="dialog" id="dialog">...</div>
66
répondu Tombart 2011-11-29 16:33:49

Cette réponse fonctionne aussi:

    $.mobile.changePage('#myPage', {transition: 'pop', role: 'dialog'});   
49
répondu Joseph Anderson 2012-01-09 16:43:20

S'il n'est pas important d'utiliser "dialogue" ou "popup", essayez ceci:

$("#dialog").popup('open');
20
répondu Ahmet Mehmet 2012-12-13 01:12:36

Manière correcte avec la dernière version de la requête

$.mobile.changePage("#dialog", { transition: "pop",role: "dialog" })
5
répondu Grumpy 2013-12-19 00:20:48

À partir de JQM 1.4, le changePage a été obsolète et sera supprimé en 1.5 ( http://api.jquerymobile.com/jQuery.mobile.changePage/)

Ils suggèrent que l'on devrait utiliser le change() méthode de pagecontainer à la place.

$.mobile.pageContainer.pagecontainer("change", "#dialog", { transition: 'pop', role: "dialog" });
1
répondu brixenDK 2015-01-29 08:39:18