webentwicklung-frage-antwort-db.com.de

Jquery Mobile - $ .mobile.changepage lädt keine externen .JS-Dateien

Es fällt mir also schwer, $.mobile.changePage zu bekommen, um richtig zu funktionieren. Ich nenne es so: 

$.mobile.changePage( "DataformsM-AddRecord.html", { transition: "slide"} );

Wenn jedoch die HTML-Seite geladen wird, sind keine der externen .js (die Dateien, die ich geschrieben habe, um etwas zu tun) enthalten. Ich folge den bedeutenden Ladekonventionen von 

-Jquery
-(CUSTOM JS)
-Jquery Mobile

Weiß jemand, warum dies nicht richtig geladen wird? Auch die Pageshow-Funktion wird nicht ausgelöst, was seltsam ist. Es sieht aus wie das:

$("div[data-role*='page']").live('pageshow', function(event, ui) { 

    loadFormFields();

});

Jetzt wird die Seite gerendert, aber keines der funktionalen Dinge passiert. Wenn ich es hacke und so etwas mache: 

document.location.href="DataformsM-AddRecord.html";

Es wird richtig funktionieren.

20
gabaum10

jQuery Mobile zieht nicht die gesamte Seite in den Dom ein, sondern greift nach dem first data-role="page"-Element und dessen Nachkommen und zieht es in den aktuellen Dom ein.

Daher werden Skripte im <head> des Dokuments nicht eingeschlossen.

Im Allgemeinen füge ich das gesamte funktionale JavaScript für meine Website auf der Indexseite hinzu. Wenn externe Seiten in den Dom geladen werden, können sie von den bereits geladenen Skripts profitieren.

Sie können auch JavaScript-Code in das data-role="page"-Element einfügen. Dieser Code wird eingefügt, wenn jQuery Mobile die Seite AJAX lädt.

UPDATE

Ein gutes System dafür ist, alle Ihre JS in eine Include-Datei zu packen und auf jeder Seite der Site einzubinden. Es wird ignoriert, wenn Seiten von AJAX in das DOM geladen werden. Wenn jedoch jemand auf Ihrer Website aktualisiert wird, ist der JS verfügbar.

43
Jasper

Aus dem, was Jasper so weise oben erwähnt hatte, habe ich eine funktionierende Lösung gefunden.

Grundsätzlich lade ich alle meine JS- und CSS-Dateien in die Indexseite, um zu starten. Wenn Sie jetzt laden, wird diese Methode für pageshow ausgelöst.

$("div[id*='page1']").live('pageshow', function(event, ui) { 
    setTimeout(function() { window.scrollTo(0, 1) }, 100);
    doStuffWhenPageintializes();
});

Wenn ich die $.mobile.changePage( "someOtherPage.html", { transition: "slide"} ); aufrufe, wird die pagehide-Methode für das page1-Objekt ausgelöst. Hier können Sie die Methode auslösen, um die Seite zu initialisieren, zu der Sie wechseln. 

$("div[id*='page1']").live('pagehide', function(event, ui) { 
    setTimeout(function() { window.scrollTo(0, 1) }, 100);
    loadStuffForNewPage();
});

Jetzt können Sie die document.location.href="external.html"-Leitung entfernen und einfach den nativen JQM-Aufruf verwenden. Hoffe das hilft einigen Leuten.

3
gabaum10

Wiederholen Sie den Kopfteil mit allen Skripts in jeder HTML-Seite, da die Änderungsseite das Neuladen der Seiten bewirkt und den Kopfteil neu erstellt.

eine einfache Änderungsseite wie diese würde dann funktionieren:

$.mobile.changePage('abc.html', {
    transition: 'slide'
});
1
Sheetal

Es scheint, dass es keinen "richtigen" Weg gibt, mit dem JQM externe HTML-Dateien lädt. Vielen Dank an Jasper für die Lösung.

JQM schlägt ein Neuladen von AJAX vor, wenn Sie zu externen Seiten wechseln möchten, z.

<a href="foo.html" rel="external">

oder

<a href="foo.html" data-ajax="false">

Ich habe beides ausprobiert, aber sie funktionierten nicht - ich programmiere für native Apps, vielleicht funktioniert das auch für Web-Apps?

0
Mike

Ich löste dieses Problem, indem ich das Skript in den Kopfbereich der zuletzt geladenen Seite steckte, das mir half und funktionierte. JQM erhält nicht den Kopfabschnitt der kürzlich geladenen Seite im DOM, sodass der JS-Inhalt der letzten Seite nicht angezeigt wird. Wenn Sie das gesamte Skript in eine externe JS-Datei oder in den Kopfbereich der ersten Seite einfügen, kann dies den Trick für Sie tun.

0
Hanzala Ali