AJAX wie gehts? (Seite 2)

Ich frage mich gerade warum ihr document.querySelector nicht noch aufführt als Alternative. Beziehungsweise document.querySelectorAll

Schade das die Browser bisher nicht übergreifend www.w3.org/TR/2012/WD-css3-conditional-20120911/ unterstützen.

joerg schrieb:
Ich frage mich gerade warum ihr document.querySelector nicht noch aufführt als Alternative. Beziehungsweise document.querySelectorAll

Xeno ist Anfänger und ich denke, mit Basics zu beginnen, ist nicht verkehrt. Die genannten Methoden sind einfach und führen ein wenig an das Thema heran, während die querySelector-Methoden komplizierter sind und Grundlagen überspringen.
Außerdem sind sie für den vorliegenden Quelltext deutlich zu überdimensioniert, wir brauchen diesen Umfang gar nicht.

joerg schrieb:

Schade das die Browser bisher nicht übergreifend www.w3.org/TR/2012/WD-css3-conditional-20120911/ unterstützen.

Ja, solche Feinheiten irgendwann mal einfach nutzen zu können, wird großartig!

@Matthes erklärst du mir mal bitte warum du die querySelector Methoden als überdimensioniert empfindest?

Ich liebe die Teile, weil ich mir keine Gedanken mehr darüber machen muss welche Methoden ich im nativen JavaScript-Bereich anstelle verwenden kann.
Ich muss mir halt eben nur Gedanken machen welche CSS Selektoren ich verwende.

Eine JavaScript Biliothek, welche auch immer erscheint mir da eher überdimensioniert.

Leider sind diese Feinheiten und auch andere im CSS Bereich sowas von Zukunftsmusik.

joerg schrieb:
@Matthes erklärst du mir mal bitte warum du die querySelector Methoden als überdimensioniert empfindest?

Ich liebe die Teile, weil ich mir keine Gedanken mehr darüber machen muss welche Methoden ich im nativen JavaScript-Bereich anstelle verwenden kann.
Ich muss mir halt eben nur Gedanken machen welche CSS Selektoren ich verwende

Wir brauchen die Selektorenmöglichkeiten der querySelector-Methoden nicht, wir müssen keine Abfrage der Art "tag.class[attribut=wert]" starten. querySelector ist wesentlich performancehungriger als die Basis-Methoden der getElement*-Reihe, die querySelectoren brauchen bis zu fünf Mal mehr Zeit.
Außerdem ist es nicht verkehrt, diese Funktionen zu kennen und gezielt einzusetzen, ehe man sich größerem zuwendet.

Zusätzlich birgt querySelectorAll eine kleine Falle, weil er kein Live-Ergebnis zurückliefert. Die dürfte zwar eher selten auftreten, wäre aber für einen Neuling schwer zu verstehen.

joerg schrieb:
Eine JavaScript Biliothek, welche auch immer erscheint mir da eher überdimensioniert.

Ja, absolut, das wäre ein noch übertriebenerer Schritt.

joerg schrieb:
Leider sind diese Feinheiten und auch andere im CSS Bereich sowas von Zukunftsmusik.

Wir sind jung, wir können warten.

Puh, ich bin noch immer beim erstes Step, den 404 abfangen. Leider waren meine Tests allesamt nicht von Erfolg gekröhnt. Mit Javascript werde ich einfach nicht warm. Ich hab es nicht einmal geschafft, den div mit der ID=Container mit dem Body Tag zu setzen, obwohl das nur eine Zeile im Script ist die entsprechend abgewandelt werden muss.

An der Stelle muss ich wohl aufgeben, es sei denn wer hat noch einen Codeschnipsel, wie ich den 404 abfangen könnte.

Der 404 entsteht, weil Du allen Elementen in der nav immer ein onclick-Event zuweist. Dabei unterscheidest Du nicht zwischen den a-Tags und dem span-Tag, da Du die Elemente über eine ID ansprichst - und die ID hat auch der span-Tag.

Eine der simpelsten Lösungen ist die Anpassung der function ajaxify_link.
Umschließe die if-Überprüfung mit einem weiteren if, der abfragt, ob link_element.localName=="a" ist.
Falls dem so sein sollte, werden die onclick-Events hinzugefügt, falls nicht, bleiben sie weg.

function ajaxify_link(link_element) {
if (link_element.localName == "a") {
link_element.onclick = null;
if (!link_element.addEventListener) {
link_element.attachEvent("onclick", function(e) {
e.returnValue = false;
changeBrowserURL(link_element);
getPage(link_element.href);
}, false);
}
else {
link_element.addEventListener("click", function(e) {
e.preventDefault();
changeBrowserURL(link_element);
getPage(link_element.href);
}, false);
}
}
}
function ajaxify_link(link_element) {
link_element.onclick = null;
if (link_element.localName == "a") {
if (!link_element.addEventListener) {
link_element.attachEvent("onclick", function(e) {
e.returnValue = false;
changeBrowserURL(link_element);
getPage(link_element.href);
}, false);
}
else {
link_element.addEventListener("click", function(e) {
e.preventDefault();
changeBrowserURL(link_element);
getPage(link_element.href);
}, false);
}
}
}

Hm, ersteres erzeugt keine Aktualisierung der Seite, zweiteres erzeugt immer einen neuen Tab beim Klicken. \'