Xenotyp
Themenersteller
Guru (153 Beiträge)
AJAX wie gehts?
Atm habe ich wieder ein kleines Zeitfenster und nachdem ich mich nun in HTML und CSS weitergebildet hab, soll es diesmal Javascript sein und genauer AJAX. Dabei will ich nicht unbedingt JS lernen, sondern vielmehr verstehen durch abkupfern. Dafür habe ich mir diese Seite als Vorlage genommen:
chrome.google.com/webstore/detail/xeno-aero/fiohidfnkfomfhhdlemcdfibihlhcjkg
Klicke ich dort die einzelnen Reiter an, wird die Seite nicht neugeladen, sondern (scheinbar) via AJAX der Content asynchron nachgeladen. Somit aktualisiert die Seite nicht. Was aber sehr geil ist, ist dass die URL sich verändert! o.O
Hat jemand hier schon ähnliches implementiert?
Gibt es übersichtliche(re) Codebeispiele dafür?
matthes
Foren Moderator
Evil Genius
Content Halbgott (973 Beiträge)
Und da fragst du (immernoch) hier...?
Die Zahl ernstzunehmender Beiträge und aktiver Nutzer ist praktisch 0.
Schau dir history.pushState() an, damit änderst du die URL. Zum asynchronen Laden findet man sicher genug Tutorials, die abkupferfähig sind.
Make Seitenreport great again!
Ja, da hast du wohl recht. :/
Aber danke für das Schlagwort: History Push war genau das, was ich gesucht habe. Ein Beispiel zum asynchronen Laden habe ich nun auch schon gefunden. Jetzt kanns losgehen.
Die History Api hat mich tatsächlich dahin gebracht, wo ich hin wollte. Nach kurzer Eingewöhnung für das Verständnis, war die Implementierung ein Kinderspiel und ich kann diese Funktion nur wärmstens empfehlen.
Nur noch eine Frage:
Die History Api ersetzt für mich den Bereich, der im div Container mit der ID "Container" steht. Für meine Zwecke wäre das sämtlicher Inhalt der im Body steht. Kann ich mit JS statt IDs von Div Containern auch irgendwie das nav-Tag von HTML5 oder den Body-Tag ansteuern?
<body>
<script src="files/script.js"></script>
</body>
</html>
Quasi möchte ich mir der Optik halber, gerne das
ersparen.
//E: Außerdem habe ich festgestellt, dass wenn ich auf einen als "aktiv markieren Menüpunkt" klicke (was eigentlich nicht gehen sollte, weils keine Links sind) auf meine 404 Seite geleitet werde. Irgend eine Idee, wie ich soetwas abfangen kann? Evtl. Htaccess?
matthes
Foren Moderator
Evil Genius
Content Halbgott (973 Beiträge)
Klar, document.getElementsByTagName(\'nav\').
Gibt ein Array zurück und da Du wahrscheinlich nur ein nav-Element hast, dürfte es sicher sein, gleich document.getElementsByTagName(\'nav\')[0] zur Zuweisung zu verwenden.
PS: Du benutzt die Funktion doch sogar schon...
PPS: Du weist dem Objekt mit der ID aber ein onclick-Event zu, weil Du jedesmal ALLEN nav-Elementen eines zuweist. Einfach prüfen, ob es ein Link ist und dann erst onclick hinzufügen. Es ist kein Link, deshalb gibt link_element.href "undefined" zurück, deshalb ruft ein Klick auf das Element /undefined auf und deshalb schlägt es fehl.
Make Seitenreport great again!
Matthes schrieb:
Klar, document.getElementsByTagName(\'nav\').
Gibt ein Array zurück und da Du wahrscheinlich nur ein nav-Element hast, dürfte es sicher sein, gleich document.getElementsByTagName(\'nav\')[0] zur Zuweisung zu verwenden.
PS: Du benutzt die Funktion doch sogar schon...
Hmm, in dem Stil habe ich bereits versucht den Body an zu sprechen:
document.getElementById(\'body\').innerHTML = new_container_element;
oder:
getElementsByTagName(\'body\').innerHTML = new_container_element;
Dann mag der Browser aber gar nichts mehr beim Onclick machen. :/
Evtl. mag er die Syntax auch nur nicht, aber da habe ich beinahe alles "durch".
matthes
Foren Moderator
Evil Genius
Content Halbgott (973 Beiträge)
Das ist auch nicht das, was ich geschrieben habe.
Der Body hat keine ID, wie willst Du ihn über getElementById ansprechen?
getElementsByTagName hingegen gibt alle Elemente eines Tags zurück, als Array.
Also wäre document.getElementsByTagName(\'body\')[0] die richtige Notierung. Du musst ja auf das erste Element des Arrays zugreifen.
Allerdings würde ich eher den Inhalt von main und nav tauschen als den ganzen body. Ich habe aber gerade keine Daten, die das Gefühl untermauern würden.
PS: viel PS heute... Die nav würde ich gar nicht in den Request einbeziehen, sondern wirklich nur den Inhalt des main-Elements. Die nav dann separat anpassen, z.B. css-Klassen tauschen.
Make Seitenreport great again!
Matthes schrieb:
Das ist auch nicht das, was ich geschrieben habe.
Der Body hat keine ID, wie willst Du ihn über getElementById ansprechen?
getElementsByTagName hingegen gibt alle Elemente eines Tags zurück, als Array.
Ah, ich sehe mir fehlen doch noch einige JS Kenntnisse. In den Teil muss ich mich wohl noch etwas mehr einlesen. Leider reicht es auch net den Teil im Main-Tag oder Nav-Tag zu wechseln, da sowohl Main als Nav sich bei einem Klick verändern.
Hättest du ein Beispiel, wie ich den 404 umgehe, indem ich festlege, dass nur bei Links gehandelt wird?
matthes
Foren Moderator
Evil Genius
Content Halbgott (973 Beiträge)
Xenotyp schrieb:
Ah, ich sehe mir fehlen doch noch einige JS Kenntnisse. In den Teil muss ich mich wohl noch etwas mehr einlesen. Leider reicht es auch net den Teil im Main-Tag oder Nav-Tag zu wechseln, da sowohl Main als Nav sich bei einem Klick verändern.
Aber in der nav ändert sich nur die Darstellung des aktiven Navigationspunktes.
Ich würde es über einen Wechsel der CSS-Klasse lösen und das a-Element löschen.
Die Klasse "active" beim derzeit aktiven Element entfernen und zum angeklickten hinzufügen. Dann den Link im ehemals aktiven Element ergänzen, die ID entspricht der URL, d.h. es ist auch nicht viel nötig, um das href-Attribut zusammenzusetzen.
Oder ändert sich mehr?
Xenotyp schrieb:
Hättest du ein Beispiel, wie ich den 404 umgehe, indem ich festlege, dass nur bei Links gehandelt wird?
Da gibt es viele Möglichkeiten. Prüfe, ob href gesetzt ist, bevor Du das Event hinzufügst. Schau, ob element.tagName = "a" bzw. "span" ist (Groß-/Kleinschreibung prüfen, bin nicht sicher, wie es im DOM zurückgegeben wird), oder ob die parentNode die Klasse "active" hat...
Die erste Variante wäre wohl die beste, kein href -> kein onclick.
Make Seitenreport great again!
Hell, das klingt aufwendig. Aber vielen Dank für den Denkanstoß. Dann will ich morgen mal beginnen, ob ich so etwas zu stande bekomme.
Ich muss das sequentiell angehen:
Zuerst der 404 weg
Dann den Body Tag anstelle des div-containers
Dann das Erstellen der Links via CSS
Dann der Main Tag anstelle des Body Containers in die Api History aufnehmen
matthes
Foren Moderator
Evil Genius
Content Halbgott (973 Beiträge)
Ja, das klingt vernünftig. So besonders viel Aufwand ist es gar nicht, Du bist nur noch ungeübt...
Make Seitenreport great again!
Das Seitenreport Forum hat aktuell 5275 Themen und 36110 Beiträge.
Insgesamt sind 48360 Mitglieder registriert.
Beitrag erstellen
EinloggenKostenlos registrieren