Du bist hier:  Seitenreport    Forum    Web-Entwicklung    AJAX & JavaScript (JS)    AJAX wie gehts?

AJAX wie gehts?

Verfasst am: 20. 01. 2017 [12:46]
Xenotyp
108 Beiträge
Dabei seit: 05.06.2015

Aktiver Schreiber
Themenersteller

Beitrag hilfreich?

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:

http://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?

Verfasst am: 20. 01. 2017 [16:06]
Matthes
781 Beiträge
diverses
Dabei seit: 08.05.2010

✓ Seitenreport Vorantreiber

Beitrag hilfreich?

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!


Verfasst am: 23. 01. 2017 [15:07]
Xenotyp
108 Beiträge
Dabei seit: 05.06.2015

Aktiver Schreiber
Themenersteller

Beitrag hilfreich?

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. :)

Verfasst am: 30. 01. 2017 [13:05]
Xenotyp
108 Beiträge
Dabei seit: 05.06.2015

Aktiver Schreiber
Themenersteller

Beitrag hilfreich?

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?

PHP
<body>
 <div id="container">
  <nav>
   ...
  </nav>
  <main>
   ...
  </main>
 </div>
 <script src="files/script.js"></script>
</body>
</html>


Quasi möchte ich mir der Optik halber, gerne das <div id="container"></div> 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?

[Dieser Beitrag wurde 1mal bearbeitet, zuletzt am 30.01.2017 um 13:16.]

Verfasst am: 30. 01. 2017 [13:17]
Matthes
781 Beiträge
diverses
Dabei seit: 08.05.2010

✓ Seitenreport Vorantreiber

Beitrag hilfreich?

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!


Verfasst am: 30. 01. 2017 [14:00]
Xenotyp
108 Beiträge
Dabei seit: 05.06.2015

Aktiver Schreiber
Themenersteller

Beitrag hilfreich?

"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:

PHP
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".

[Dieser Beitrag wurde 1mal bearbeitet, zuletzt am 30.01.2017 um 14:03.]

Verfasst am: 30. 01. 2017 [14:06]
Matthes
781 Beiträge
diverses
Dabei seit: 08.05.2010

✓ Seitenreport Vorantreiber

Beitrag hilfreich?

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!


Verfasst am: 30. 01. 2017 [14:25]
Xenotyp
108 Beiträge
Dabei seit: 05.06.2015

Aktiver Schreiber
Themenersteller

Beitrag hilfreich?

"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?

Verfasst am: 30. 01. 2017 [15:03]
Matthes
781 Beiträge
diverses
Dabei seit: 08.05.2010

✓ Seitenreport Vorantreiber

Beitrag hilfreich?

"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!


Verfasst am: 30. 01. 2017 [15:22]
Xenotyp
108 Beiträge
Dabei seit: 05.06.2015

Aktiver Schreiber
Themenersteller

Beitrag hilfreich?

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

[Dieser Beitrag wurde 1mal bearbeitet, zuletzt am 30.01.2017 um 15:41.]




to Top to Top

Du bist nicht eingeloggt. Bitte beachte, dass Du eingeloggt sein musst, um Themen zu erstellen oder auf Beiträge zu antworten.

RSS Feed abonnieren

Werde in Echtzeit über neue Foren-Beiträge informiert:

RSS Feed abonnieren


5 Mitglieder waren innerhalb der letzten 15 Minuten online (37 heute gesamt):
Astrotel, Msindermann, nicoletta1966, seocomplete, TheFurb

Administratoren und Moderatoren:
[keine]

Seitenreport hat 44513 registrierte Mitglieder, 4238 Themen und 36961 Beiträge.
Der aktuelle Mitgliederzuwachs liegt bei durchschnittlich 9 bestätigten Neuregistrierungen pro Tag.
Pro Tag werden im Seitenreport Forum durchschnittlich 0 neue Themen und 4 Beiträge erstellt.
Die Durchschnittszahlen berechnen sich aus den letzten 7 Tagen.

Mehrfach empfohlen

Seitenreport ist einer der bekanntesten SEO und Website Analyse Dienste im deutschsprachigen Raum und wurde u.a. schon empfohlen:
von Mr. Wong im Wong Letter
vom Leserservice der Deutschen Post
vom Technik Blog SiN
und vielen anderen

Seitenreport API

Verfolge die SERP Positionen Deiner Keywords und erhalte Informationen über verwendete Mikroformate, frage die Ergebnisse unserer Analysen live ab oder greife auf unsere History-Datenbank zu. Dies alles bietet Dir die neue Seitenreport API. Kontaktiere uns, um weitere Infos zu erhalten.