Auf Linkklick reagieren, statt weiterleiten, Ajax nutzen

[Luisa P.]

Halli Hallo.

Ich habe mir eine Navigation gebastelt und mich ein wenig mit JS und Ajax auseinander gesetzt.

Angenommen ich habe eine Navigation dieser Art:

<ul id='navigation'>
<li><a href="seite1.php">Seite 1</a><li>
<li><a href="seite2.php">Seite 2</a><li>
<li><a href="seite3.php">Seite 3</a><li>
</ul>

So nun möchte ich das wenn ich auf einen Link in "navigation" klicke, dessen href ausgelesen wird und einer Funktion meiner Wahl als Parameter übergeben wird.

Mein Versuch:

var navigation=document.getElementById('navigation');
var theevent=navigation.a.addEventListener("click", theclick, false);

function loggedinclick(){
FunktionMeinerWahl(theevent.href);
}

So Problem Nummer 1: Die Funktion wird nicht aufgerufen
Problem Nummer 2: Die Seite wird so geladen, soll sie aber nicht, der href wert soll ausgelesen werden, danach soll damit gearbeitet werden und ich will mich danach noch auf der selben Seite befinden.

Ich möchte auch nicht jedem Link eine ID zuweisen sondern es irgendwie "abstrakter" und flexibler machen.

Liebe Grüße,

Luisa

[Gunnar Bittersmann]

@@Luisa P.:

nuqneH

So Problem Nummer 1: Die Funktion wird nicht aufgerufen

Was sagt die Fehlerkonsole? Dass "navigation.a" nicht existiert?

Du könntest 'navigation.getElementsByTagName("a")' verwenden und in einer Schleife die Eventhandler für jedes dieser 'a'-Elemente setzen.

Oder besser das Event für "navigation" registrieren (dort steigt es durch event bubbling auf) und in der Funktion abfragen, welches 'a'-Element das Event auslöste.

Siehe §14 und §15 in molilys JavaScript-Doku JavaScript: Einbindung in HTML und Ereignisverarbeitung

Problem Nummer 2: Die Seite wird so geladen, soll sie aber nicht,

'return false;' am Ende der Funktion.

Qapla'

[molily]

Siehe §14 und §15 in molilys JavaScript-Doku JavaScript: Einbindung in HTML und Ereignisverarbeitung

Oder auch Effizientes Event-Handling: Event-Delegation, ich glaube, das Beispiel ist näher an der Fragestellung.

Mathias

[Luisa P.]

Hi.

Was sagt die Fehlerkonsole? Dass "navigation.a" nicht existiert?

Fehlerkonsole?

Du könntest 'navigation.getElementsByTagName("a")' verwenden und in einer Schleife die Eventhandler für jedes dieser 'a'-Elemente setzen.

Wie mache ich das denn, foreach geht irgentwie nicht.

Danke.

[Luisa P.]

Hallo.

Ist es nicht irgendwie möglich das man generell jeden Link abfängt?
Also wenn da steht:

<a href='seite1.php'>Seite 1</a>

Dann klicke ich drauf, und in der Adressleiste steht auch seite1.php, erneuert wird aber dank Ajax nur ein bestimmter Bereich.

Möglich?

Gruß,

Luisa

[Luisa P.]

Ich habe jetzt folgendes Versucht, klappt aber nicht aber es ist wie in Molilys Beispiel:

document.getElementById("Navigation2").onclick = zeigeSeite;  
  
function zeigeSeite (e) {  
   var e = e || window.event;  
   var target = e.target || e.href;  
  
   var elementName = target.nodeName,  
      aElement = false;  
   // Überprüfe, ob das Zielelement ein Link oder ein Bild im Link ist:  
   if (elementName == "a") {  
      // Falls ein Link geklickt wurde, speichere das Zielelement  
      // in der Variable aElement:  
      aElement = target;  
   }  
  
   // Zeige das Vollbild, wenn das Zielelement  
   // ein Link ist oder in einem Link liegt:  
   if (aElement) {  
      RUFE_FUNKTION_ZUM_NEULADEN_DES_CONTENTS(aElement.href);  
      // Unterdrücke die Standardaktion:  
      return false;  
   }  
}

Was mache ich nur falsch?

[molily]

document.getElementById("Navigation2").onclick = zeigeSeite;

Wenn du im HTML auch genau <ul id="Navigation2"> notiert hast, müsste das klappen.

Das getElementById funktioniert natürlich nur,

• wenn das <script>..</script> im HTML-Quellcode nach der Navigation folgt,
• oder du den Code beim window.onload aufrufst.

window.onload = function () {
   // Event-Handler registrieren
};

http://molily.de/js/einbindung.html#ereignisbasierung
http://molily.de/js/einbindung.html#traditionelles-event-handling

function zeigeSeite (e) {
   var e = e || window.event;
   var target = e.target || e.href;

Wieso hast du diese Zeile abgewandelt? Sie dient zum browserübergreifenden Zugriff auf das Zielelement. Da sollte schon e.target || e.srcElement stehen. (srcElement ist die Variante für den IE.)

var elementName = target.nodeName,
      aElement = false;
   // Überprüfe, ob das Zielelement ein Link oder ein Bild im Link ist:
   if (elementName == "a") {

Das ist schon richtig gedacht, allerdings gibts hier einen Fallstrick:

nodeName gibt einem den Elementnamen immer in Großschreibung zurück (zumindest in HTML und XHTML-als-HTML, nicht in XHTML-als-XML).

Entweder prüfst du also

if (elementName == "A") ...

oder du vereinheitlichst das, indem du mit toLowerCase Kleinschreibung erzwingst:

var elementName = target.nodeName.toLowerCase(),
   aElement = false;

Mathias