Verwenden der Schaltflächen Zurück und Vorwärts mit der Verlaufs-API

8

Ich habe die folgende Testanwendung: Ссылка

Sie können auf die Links klicken, um sie auf anderen Seiten mit jQuery AJAX zu laden, und es gibt zwei Typen, globalTabs und localTabs, die den Inhalt in verschiedene Bereiche laden. HINWEIS: Jede Seite ist eigentlich die ganze Seite, aber wir greifen nur den Inhalt, den wir wollen, mit der jQuery find-Methode.

Um dies zu verbessern, verwende ich die HTML5-History-API (History.js für Browser-übergreifend).

Die Titel und URLs ändern sich gut und der Geschichtestapel wird erfolgreich verschoben. Wenn ich die Zurück- und Vorwärts-Schaltflächen verwende, werden die URL und der Titel wieder zurückgesetzt.

Nun wird der komplizierte Teil wieder in den Inhalt des vorherigen Zustandes geladen und das Laden des korrekten Typs, z. globale oder lokale Ajax. Um dies zu erreichen, denke ich, dass ich sowohl die Daten als auch den Typ an den Push-Zustand übergeben muss, damit er wieder für den popstate wiederverwendet werden kann ...

Kann mir jemand helfen, mich in die richtige Richtung zu lenken? Ich habe alle ersten Teile funktioniert, nur ein Fall von dieser Übergabe des Ajax-Typs an den Push-Zustand und dann wieder mit dem Popstate-Wechsel.

Um dies zu verbessern, überschreibe ich es wie folgt, um meinen Plan zur Weitergabe des Typs und der Daten zu zeigen:

HINWEIS: Der Großbuchstabe der Geschichte stammt von der Verwendung von History.js

%Vor%

UPDATE: Um diese Frage zu klären, gibt es zwei Probleme, mit denen ich Hilfe suche.

1.) Holen Sie sich die Vor- und Zurück-Buttons, die mit den Ajax-Anfragen arbeiten, damit sie die richtigen Daten zurück in den Inhaltsbereich laden.

2.) Laden Sie den Inhalt in den richtigen Bereich, indem Sie den Inhalt mit der Methode pushState übergeben, damit dieser weiß, ob es sich um eine globale div- oder lokale div-Anfrage handelt.

    
Cameron 17.08.2012, 09:36
quelle

2 Antworten

12

Das Datenobjekt ist falsch, deshalb haben Sie dieses Problem. Ein Objekt wird durch Schlüssel, Wertepaar definiert:

%Vor%

nicht

%Vor%

Mit der Objektdefinition erhalten Sie Ihre Daten mit History.getState ()

zurück %Vor%

HINWEIS:

  • Wenn das statechange-Ereignis ausgelöst wird, wenn Daten vorhanden sind, werden die Ajax-Aufrufe ausgelöst
  • um den Ajax-Aufruf zu simulieren, ohne dass es nur den Titel ändert, denke ich, dass es den Titel abdeckt

BEARBEITEN

  • Das Datenobjekt stammt tatsächlich aus History.getState (). data nicht History.getState ()
  • hat dem gespeicherten Objekt einen weiteren Parameter hinzugefügt, um die URL zu erhalten
  • Mit der URL und dem Typ können Sie die gleiche Funktion aufrufen wie im onClick-Ereignis

PROBLEM:

  

Uncaught TypeError: Konvertieren der kreisförmigen Struktur in JSON

Ein Objekt referenziert sich irgendwo; daher die Nachricht "zirkuläre Struktur.". Das bedeutet, dass Sie versuchen, ein Objekt mit einem Verweis auf sich selbst zu zeichnen, was normalerweise mit DOM-Elementen geschieht. Sie sollten wirklich darüber nachdenken,

zu ändern %Vor%

zu:

%Vor%

Beachten Sie die Schlüssel für das Objekt (HTML und Typ) und den HTML-Funktionsaufruf (.html ()), auf diese Weise werden Sie nicht unnötige Daten senden, nur die HTML. Wenn Sie die HTML-Daten beim Laden als DOM-Objekt verwenden müssen, verwenden Sie einfach folgendes:

%Vor%

Jetzt können Sie DOM_Element_loaded verwenden, um Daten im geladenen HTML zu suchen / zu bearbeiten, ohne sie an den Körper anzuhängen.

    
cuzzea 25.08.2012 07:45
quelle
0

HINWEIS : Dies ist eher ein Kommentar als eine Antwort, aber Sie erhalten eine bessere Syntaxhervorhebung mit Antwortantworten.

Das habe ich gemacht, als ich auf dieses Problem gestoßen bin. Wenn ich mich richtig erinnere, verhinderte dies das Problem der doppelten Anfrage.

%Vor%

Wenn ich history.pushState() / history.replaceState() verwende, definiere ich eine initialHref -Eigenschaft im Objekt für das erste Argument. Ich verwende eine absolute URL für diesen Wert, keine relative URL.

    
Teddy 31.08.2012 19:24
quelle

Tags und Links