Seite in ein div laden jQuery Mobile

Question

Ich möchte den Inhalt einer Seite laden, die sich in einem anderen Ordner befindet (zB: "files/pages/example.html") für den div container, indem ich auf die Schaltfläche in jQuery Mobile klicke!

Wie geht das?

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

Answer 1

Die $ .mobile.loadPage ist die Methode, die Sie benötigen. Es erlaubt Ihnen, eine externe HTML-Datei zu laden und sie in das dom einzufügen. Der Standardwert für diese Methode ist, sie als ganze Seite zu laden, also müssen Sie die Optionen angeben, um sie in ein dom-Element zu laden. Dies ist ein Beispiel (und ungetesteter) Code:

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

jetzt, vergessen Sie nicht über das Sicherheitsproblem crossDomain. Ich schaffte es, diese Arbeit in Firefox zu machen, indem das Hinzufügen:

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

Auch die Seite müssen Sie laden div in einem Daten-role = Seite umgebrochen werden (sagen wir mal es id = ‚NochNeSeite‘ hat). Nach der Last-Trigger auf der Daten-role = Seite mit id = NochNeSeite div:

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