jQuery: Verständnisproblem mit bind Events und bindBehaviors() [gelöst]
Eingetragen von quiptime (4972)am 09.12.2008 - 15:19 Uhr in
An folgendem Problem hänge ich gerade fest und suche die Lösung:
Mehrere Select Listen sollen mittels Ajax angezeigt werden. Eine Folge-Liste soll durch Auswahl in der aktuellen Liste zur Anzeige kommen. Die 1. Liste ladet eine 2. Liste. Das funktioniert. Das Problem ist nun, wenn durch eine Auswahl in der 2. Liste eine 3. Liste geladen werden soll so versagt die jQuery Funktion den Dienst.
Das ist der Code:
if (Drupal.jsEnabled) {
$(document).ready(function() {
$("#tree-block-wrapper select").change(function() {
var val = $("#tree-block option[@selected]").attr("class");
var tid = val.substr(5);
$.getJSON(base_path + "taxonomy/term/block_ajax/" + tid, function(data) {
$("#block-ajax-content").html(data['mymenu']);
});
});
});
}Durch meine jQuery Recherchen bin ich zu dem Ergebnis gekommen das ich Events binden muss um in mittels jQuery geladenem HTML Code Events ausführen zu können.
Erste Frage ist, liege ich mit meiner Erkenntnis richtig?
Wenn dem so ist taucht mein eigentliches Problem auf. Ich kapiere die Anwendung des "binden von Events" nicht und demzufolge gelingt mir das Eingangs Beschriebene nicht.
Mein 1. Verständnis-Versuch hat mich bei meinem Code zu dieser Version geführt:
if (Drupal.jsEnabled) {
$(document).ready(function() {
var bindBehaviors = function() {
$("#tree-block-wrapper select").change(function() {
var val = $("#tree-block option[@selected]").attr("class");
var tid = val.substr(5);
$.getJSON(base_path + "taxonomy/term/block_ajax/" + tid, function(data) {
$("#block-ajax-content").html(data['mymenu']);
});
});
}
bindBehaviors();
$("#block-ajax-content select").change( function() {
bindBehaviors();
});
});
}Dieser Code funktioniert im oberen Teil. D. h., die bisherige Funktionalität bleibt bestehen aber die gewünschte jQuery Funktionalität an nachgeladenen Listen tritt nicht ein. Ein change Event an nachgeladenen Listen wird ignoriert, produziert aber auch keinen Fehler.
Also ist mein Code zur Anwendung von bindBehaviors() nicht richtig.
Der Grund ist weil ich in der Doku dies nicht verstehe:
A first pass at solving this problem is to factor the binding out into a function, and call that function both at the time the document is ready and after the AJAX call:
Zweite Frage ist,
was bedeutet "nach dem AJAX call" und wann ist das bzw. wie ist das hinsichtlich des durch Ajax geladenen Inhalt zu verstehen?
Danke für Tipps und Loesungsansätze.
PS
Aus der grundlegenden Lösung dieser Aufgabe ergeben sich an vielen weiteren Stellen Lösungen. So auch beispielsweise wie man in Ajax geladenen Inhalten Bilder mit Lightbox anzeigen kann.
- Anmelden oder Registrieren um Kommentare zu schreiben
jQuery: Events
am 10.12.2008 - 10:22 Uhr
Hallo quiptime,
ich bin mit jQuery zwar auch nicht so sattelfest, aber vielleicht findest du hier die entsprechenden Infos:
http://www.learningjquery.com/2008/03/working-with-events-part-1
http://www.learningjquery.com/2008/05/working-with-events-part-2
Und dein Problem klingt so ähnlich wie das in http://www.drupalcenter.de/node/13881 beschriebene, vielleicht da nochmal nachfragen.
hth
Frank
dynamische selects
am 10.12.2008 - 10:37 Uhr
Moin.
...Erste Frage ist, liege ich mit meiner Erkenntnis richtig?
Ja.
...Dieser Code funktioniert im oberen Teil. D. h., die bisherige Funktionalität bleibt bestehen aber die gewünschte jQuery Funktionalität an nachgeladenen Listen tritt nicht ein. Ein change Event an nachgeladenen Listen wird ignoriert, produziert aber auch keinen Fehler.
Also ist mein Code zur Anwendung von bindBehaviors() nicht richtig.
Genau. Es sollte eigentlich nur eine Zeile fehlen.
...was bedeutet "nach dem AJAX call" und wann ist das bzw. wie ist das hinsichtlich des durch Ajax geladenen Inhalt zu verstehen?
In der Funktion
bindBehaviors()musst Du nach.getJSON()wiederbindBehaviors()aufrufen. Das sieht erstmal seltsam aus, macht aber durchaus Sinn:if (Drupal.jsEnabled) {$(function() {
var bindBehaviors = function() {
$("#tree-block-wrapper select").change(function() {
var val = $("#tree-block option[@selected]").attr("class");
var tid = val.substr(5);
$.getJSON(base_path + "taxonomy/term/block_ajax/" + tid, function(data) {
$("#block-ajax-content").html(data['mymenu']);
bindBehaviors(); /* <-- hier muss das nochmal aufgerufen werden */
});
});
}
bindBehaviors();
$("#block-ajax-content select").change( function() {
bindBehaviors();
});
});
}
Zur Erklärung: nach dem Laden des Dokuments rufst Du
bindBehaviors()auf. Dies bindet eine Funktion an sämtliche *zu diesem Zeitpunkt* bestehendeselectElemente. Wenn Du jetzt über jQuery einselectaufbaust, war das nach dem Laden des Dokuments noch nicht da, kann also die Funktion nicht mitbekommen haben.Aus diesem Grund muss
bindBehaviors()nach dem Erstellen des Elementes nochmal aufgerufen werden. Also "after the AJAX call".Ich hatte diese Funktionalität übrigens schonmal in ein Modul eingebaut: linktocontent. Allerdings mit etwas anderen Mitteln, da ich das
selectElement dort quasi per Hand aufbaue. Hier ist mal der Quelltext dazu.hth,
Stefan
jQuery Events binden - Lösung
am 10.12.2008 - 16:37 Uhr
@Stefan,
Danke Deinem Feedback.
Habe nun eine Lösung für das Binden der Events gefunden.
Hier mein obiger Code modifiziert:
<?php
if (Drupal.jsEnabled) {
$(document).ready(function() {
$("option[@id*=item-select]").livequery('click', function(event) {
var val = $(this).attr("class");
var tid = val.substr(5);
$.getJSON(base_path + "taxonomy/term/block_ajax/" + tid, function(data) {
$("#block-ajax-content").html(data['mymenu']);
});
});
});
}
?>
Das ist alles.
So ganz nebenbei habe ich feststellen dürfen das man Events auf Select-Listen nicht nur mit change() sondern auch mit dem click() Event realisieren kann.
======================================== Tags ========================================
jquery change event after ajax select option
-------------
quiptime
Nur tote Fische schwimmen mit dem Strom.