jQuery load function – Ajax the simple way (Part 1)

Mit der load Funktion lassen sich einfach HTML-Elemente einer Datei in die Aktuelle einfügen. Diese Funktion ist in erster Linie für den “import” von HTML-Code gedacht und entspricht damit nicht dem typischen Ajax-Request bei dem bspw. ein PHP Skript angesprochen wird, das Daten aus der Datenbank liest und/oder andere serverseitige Prozesse anstösst.

Soviel erstmal zur Theorie, der Funktionsaufruf sieht wie folgt aus:

1

 $('#someElement').load('/someFile #mydiv');

So kurz so einfach. In das Element mit der id “someElement” wird der gesamte Inhalt eines divs mit der id “mydiv” geladen. Das geniale dabei ist, dass sich “mydiv” überhaupt nicht im aktuellen Dokument befindet, sondern in der Datei “someFile”.
Als zweiten Parameter kann man der load Funktion auch noch Daten als sogenanntes Key/Value Paar übergeben.

1

 $('#someElement').load('someFile.php',{'param': 'someValue'});

Das enspricht allerdings jetzt schon eher dem normalen Ajax-Request. Das oder die Key/Value Paare werden dem php-Skript als post-Paramter übergeben. Natürlich verliert man damit den Vorteil des vorigen Beispiels sich einfach DOM-Elemente aus einem anderen HTML-Skript zu holen. Aber falls man das Ergebnis eines Request einfach direkt ohne weitere Verarbeitung in ein Element einfügen möchte, ist das eine sehr einfache und komfortable Variante.

Im nächsten Teil wird es dann um die anderen fortgeschritten jQuery Ajax Varianten wie get, getJSON, etc. gehen.

jQuery – Click Handler Elementen zuordnen und entfernen

Click handler sind wohl eine der meistgenutzen Funktionen wenn man mit jQuery arbeitet. Selten kommt man ohne sie aus.
Ich will euch heute mal kurz ein paar Feinheiten hierzu vorstellen.

Einen Click handler einem Element hinzufügen
Einem Element einen Click handler mitzugeben ist wohl mit das einfachste.

1
2
3

$('#idDesElements').click(function(){
    window.alert("Click handler ausgelöst!");
});

Mehrer Click handler einem Element hinzufügen
Einem Element kann übrigens mehr als nur ein Click handler zugewiesen werden.
Wird das Element geklickt, werden alle handler der Reihe nach ausgeführt.

1
2
3
4
5
6

$('#idDesElements').click(function(){
    window.alert("Click handler 1!");
});
$('#idDesElements').click(function(){
    window.alert("Click handler 2");
});

Click Handler entfernen
Um Click Handler wieder zu entfernen reicht ein einfaches unbind.

1

$('#idDesElements').unbind('click');

Click Handler hinzufügen und gleichzeitig entfernen
Da wir mit jQuery ja die wunderschöne Methode des Chainings zur verfügung haben, können wir einem einem Element alle Ihm bisher zugeordneten Click Handler entziehen und gleichzeitig einen neuen hinzufügen.

1
2
3

$('#idDesElements').unbind('click').click(function(){
    window.alert("neuer Click handler ausgelöst!");
});

Click Handler und Anker
Wenn man einen Click Handler an einen Linkanker aufruft, aber nicht will das der Browser dem Link folgt, nachdem der Handler aufgerufen wird muss zusätzlich einfach ein return false;

1
2
3
4

$('#idDesElements').click(function(){
    window.alert("Click handler");
    return false;
});