2012-03-26 14 views
6

Tengo un solo archivo .html que tiene una apariencia similar a la siguiente:mediante programación abrir un diálogo en jQuery Mobile

<div id="myPage" data-role="page"> 
    <div data-role="header"> 
    <a href="#" data-icon="arrow-l" data-iconpos="notext" class="ui-btn-left jqm-home" onclick="backButton_Click();">Back</a> 
    <h1>My App</h1> 
    </div> 

    <div> 
    <input id="saveButton" type="button" value="Save" onclick="doStuff()" /> 
    </div> 

    <script type="text/javascript"> 
    function doStuff() { 
     var updatedText = getUpdatedText(); 
     $("#myMessage", "#myDialog").html(updatedText);      
     $.mobile.changePage("#myDialog", { role: "dialog" });  
    } 
    </script> 
</div> 

<div id="myDialog" data-role="page"> 
    <div id="myMessage"></div> 
    <input id="button1" type="button" value="Button 1" data-theme="b" onclick="someJS1();" /> 
    <input id="button2" type="button" value="Button 2" data-theme="c" onclick="someJS2();" /> 
</div> 

Cuando "hacerTarea()" se llama, quiero configurar un mensaje personalizado en el texto de mi diálogo y abra el diálogo. Por algún motivo, no he podido abrir myDialog. Por mi vida, no puedo entender lo que estoy haciendo mal. He revisado el contenido publicado aquí: http://jquerymobile.com/demos/1.0a4.1/docs/pages/docs-pages.html

+1

Vaya, su enlace de documentación va a una versión que tiene aproximadamente un año de antigüedad. Asegúrese de estar utilizando la versión 1.0 o posterior, ya que todo lo anterior a la versión 1.0 era una compilación de desarrollo. – Jasper

Respuesta

19

creo que es necesario para establecer el papel de la página de diálogo

<div id="myDialog" data-role="dialog"> 
    <div id="myMessage"></div> 
    <input id="button1" type="button" value="Button 1" data-theme="b" onclick="someJS1();" /> 
    <input id="button2" type="button" value="Button 2" data-theme="c" onclick="someJS2();" /> 
</div> 

Y a continuación, abrir el diálogo con

$.mobile.changePage("#myDialog"); 

Ver violín http://jsfiddle.net/kYsVp/2/

+3

Si establece 'role:" dialog "' en el objeto de opción '$ .mobile.changePage()', entonces anula el atributo 'data-role' del elemento y usa el rol especificado. Documentos aquí: http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/methods.html – Jasper

Cuestiones relacionadas