Wie übergebe ich Parameter, während ich die Seite in JQuery Mobile ändere?

8

Ich habe stackoverflow durchsucht, aber keine passende Lösung gefunden, um die jqm-Seite programmatisch zu ändern und einen (get) -Parameter mitzugeben. Ich bin neu bei jqm, vielleicht bekomme ich etwas falsch beim Übergeben von Daten mit der Funktion changePage ().

mit jquery mobile 1.1.1 und jquery 1.8.0

Ich habe eine Liste und möchte, dass alle Elemente auf dieselbe # Profilseite zeigen. Auf dieser Seite möchte ich die entsprechenden Daten mit AJAX / JSON laden.

%Vor%

Der erste Link funktioniert, aber es wird keine ID übergeben (offensichtlich)

Der zweite Link funktioniert nicht. Ausnahme (in Chrome): Uncaught Error: Syntaxfehler, unerkannter Ausdruck: #profile? id = 3

Der dritte Link verwendet diese Funktion:

%Vor%

Er ändert die Seite, aber die URL ist basefile.html? id = 1, aber es sollte basefile.html # profile? id = 1

sein

Kann jemand damit helfen? Vielen Dank.

    
LukeSolar 21.08.2012, 15:27
quelle

2 Antworten

16
  

Wie in den jQuery Mobile-Dokumenten erwähnt, jQuery Mobile unterstützt keine Abfrageparameter, die an interne / eingebettete Seiten übergeben werden. Es gibt jedoch zwei Plugins, die Sie Ihrem Projekt hinzufügen können, um diese Funktion zu unterstützen. Es gibt ein leichtgewichtiges Seitenparamplugin und ein vollständigeres jQuery Mobile Router-Plugin zur Verwendung mit backbone.js oder spine.js.

Es gibt andere Möglichkeiten, die Daten auf verschiedenen Seiten zu implementieren, aber einige von ihnen werden möglicherweise nicht von alten Webbrowsern unterstützt. Sie müssen Ihre Implementierung sorgfältig auswählen, damit sie keine Auswirkungen auf die Interoperabilität der Anwendung über mehrere Browser hat.

Sie können Daten zwischen verschiedenen Seiten übergeben, indem Sie den Web Storage verwenden.

  

Wie in der Website von W3schools erwähnt, können HTML5-Webseiten Daten lokal im Browser des Benutzers speichern. Früher wurde dies mit Cookies gemacht. Web Storage ist jedoch sicherer und schneller. Die Daten sind nicht bei jeder Serveranfrage enthalten, sondern werden NUR bei Aufforderung verwendet. Es ist auch möglich, große Datenmengen zu speichern, ohne die Leistung der Website zu beeinträchtigen. Die Daten werden in Schlüssel / Wert-Paaren gespeichert, und eine Webseite kann nur auf von ihr gespeicherte Daten zugreifen. Der Webspeicher wird in Internet Explorer 8+, Firefox, Opera, Chrome und Safari unterstützt. Internet Explorer 7 und frühere Versionen unterstützen keinen Webspeicher .

     

Es gibt zwei Objekte zum Speichern von Daten auf dem Client:

     
  • localStorage speichert Daten ohne Ablaufdatum
  •   
  • sessionStorage, das Daten für eine Sitzung speichert
  •   

Beispiele:

Lokales Speicherbeispiel:

Auf Seite1: localStorage.carType="test";
In Page2 können Sie den carType mit: localStorage.carType

abrufen

Sitzungsspeicher Beispiel:

In Seite1: sessionStorage.carNumber = 10;
In Page2 können Sie den carType mit: sessionStorage.carNumber

abrufen

In Ihrem Fall besteht eine mögliche Lösung darin, in jedem Anker IDs hinzuzufügen. Fangen Sie dann das Click-Ereignis ab, rufen Sie die ID ab, speichern Sie die ID im Webspeicher und führen Sie den Seitenübergang durch. Auf der nächsten Seite rufen Sie die ID aus dem Webspeicher ab. Im Folgenden finden Sie die Implementierung:

%Vor%

EDITED:

Alternative Methode zum Übergeben von Parametern, wenn Sie einem Ansatz mit mehreren Seiten folgen

In diesem Beispiel wird jQM changePage() verwendet, um Daten mit einer Ajax-Seitenanforderung zu senden.

%Vor%

Die erstellte URL lautet ... / car-details.html? id = my-id

Ein vollständiges Beispiel finden Sie in der StackOverflow-Antwort

Ich hoffe, das hilft dir.

    
Tolis Emmanouilidis 21.08.2012, 17:10
quelle
3

Ich sehe, dass diese Frage bereits beantwortet wurde und Kommentare auf der Antwort gehandelt wurden, und ich habe mich auch mit diesem Problem konfrontiert. Die Verwendung von jQuery Mobile, wie es beabsichtigt ist, erlaubt das Laden von AJAX, und daher ist keine Aktualisierung des Browsers erforderlich, wenn sie nicht von einem Benutzer ausgelöst wurde, richtig? Und wenn ein Benutzer aus irgendeinem Grund aktualisiert wird, bedeutet dies, dass die Website oder App nicht so funktioniert, wie sie aufgerufen wird, da die meisten Benutzer ohne eine frustrierende Ursache nicht aktualisiert würden.

Wenn Sie das so sagen, ist das Erstellen einer Variablen, wie in den Kommentaren vorgeschlagen, eine effiziente Möglichkeit, Daten von "Seite" an "Seite" zu übergeben. Mein Vorschlag ist jedoch stattdessen, eine globale Variable zu erstellen, die Site-Informationen enthält.

%Vor%

Offensichtlich muss der Code an Ihre Codierungskonventionen angepasst werden, aber die Konzepte sind da:

  • Speichern Sie Ihre Daten oder greifen Sie auf andere Weise darauf zu
  • Platzieren Sie die Daten in einer enthaltenen Variablen, um Überschreibungen durch externen Code zu verhindern
  • Greifen Sie auf die Datenobjektvariable zu, wenn Sie auf der nächsten Seite
  • ankommen

Es gibt andere Routen, wie bereits erwähnt (lokaler Speicher, ect), also werde ich nicht weiter darauf eingehen, da die Informationen schon da sind.

Wie oben erwähnt, bin ich auf dieses Problem gestoßen, und mein Vorschlag ist, jQuery Mobile wie vorgesehen zu verwenden und Ihre eigene Codebasis zu verwenden, um Variablen unter Verwendung einer organisierten Objekthierarchie zu erstellen und zu speichern. Wie Sie es organisieren, ist Ihrer Wahl, was genau das macht Javascript zu einer fantastischen Sprache.

Wir sind zu abhängig geworden von Bibliotheken, um einfache Probleme zu lösen, die uns die Autoren mithilfe unserer erfinderischen und persönlichen Standardmethoden überlassen. Happy Coding für alle, mit einer Ermutigung zu bauen, nicht nur Design!

    
Brett Weber 04.02.2013 23:34
quelle

Tags und Links