Cargar página a un div jQuery Mobile

Question

Quiero cargar el contenido de una página que está en otra carpeta (por ejemplo: "archivos/páginas/ejemplo.html") para el contenedor div haciendo clic en el botón en jQuery Mobile!

¿Cómo hacerlo?

<div data-role="page"> 
    <div id="container" data-role="content"><button id="clickButton">Click me!</button></div> 
</div> 

Answer 1

El $ .mobile.loadPage es el método que necesita. Le permite cargar un archivo html externo e insertarlo en el dom. El método predeterminado para este método es cargarlo como una página completa, por lo que debe especificar las opciones para cargarlo en un elemento dom. Este es un código de ejemplo (y no probado):

$('#clickButton').on("click",function(){ 
    $.mobile.loadPage("theURLofThePage",{pageContainer: $('#container')}) 
}); 

ahora, no se olvide de los problemas de seguridad crossdomain. Me las arreglé para hacer este trabajo en Firefox añadiendo:

$("#landingPage").live('pageinit', function() { 
      jQuery.support.cors = true; 
      $.mobile.allowCrossDomainPages=true; 
     }); 

Además, la página que va a cargar debe ser envuelto en una data-role = página div (digamos que tiene id = 'segundapagina'). Después de la carga, gatillo de la data-role = página con id = segundapagina div:

$('#secondPage").trigger('pagecreate');