jQuery Elemente und Ajax

[Helmut]

Hallo,
meine Internet-Seite wird mittels JSF aufgebaut.
Bestimmte teile können per AJAX verändert werden (z.B. kann zwischen verschiedenen Seiten des Settings-Fenster geswitcht werden).

In diesem Fenster wird auch jQuery hergenommen, in meinem Fall Datepicker (werden wohl noch andere folgen).
Dieser Datepicker wird ja wie gefolgt erstellt:

  
$(  
	function()  
	{  
		var dates = $( "#fromDate, #toDate" ).datepicker(  
		{  
			changeMonth: true,  
			changeYear: true,  
			dateFormat: "dd.mm.yy",  
			showButtonPanel: true,  
			onSelect: function( selectedDate )  
			{  
				var option = this.id == "c_glsPeriodFrom" ? "minDate" : "maxDate",  
					instance = $( this ).data( "datepicker" ),  
					date = $.datepicker.parseDate(  
						instance.settings.dateFormat ||  
						$.datepicker._defaults.dateFormat,  
						selectedDate, instance.settings );  
				dates.not( this ).datepicker( "option", option, date );  
			}  
		});  
	}  
);  

Wenn die Seite damit so geladen wird, funktioniert es auch wunderbar.
So bald der Teil aber erst mit AJAX geladen wird, geht die Funktionalität nicht.
Ich gehe davon aus, dass die Methode die ich oben genannt habe nur einmal aufgerufen wird, nämlich am Anfang nach dem Laden der Seite.
Nun ist die Überlegung, wie ich es schaffe, dass die Methode auch aufgerufen wird, wenn die Seite per AJAX nachgefragt wird.

Natürlich könnte ich in den AJAX-Tag von JSF eine Methode anmelden, die aufgerufen wird sobald die AJAX-Anfrage fertig ist.
Andererseits habe ich irgend wo mal gelesen, dass man diese JQuery-Methoden auch für andere Events anmelden kann, so dass sie bei bestimmten Veränderungen auch abgearbeitet werden.
Habe leider diese Becshreibung nicht mehr gefunden. Auf jeden Fall könnte ich mir vorstellen, dass man damit meine gewünschet Funktionalität irgend wie schöner umsetzen kann.

Vielleicht hat von euch damit wer Erfahrung und kann mir helfen.

Danke.

[molily]

Hallo,

Ich gehe davon aus, dass die Methode die ich oben genannt habe nur einmal aufgerufen wird, nämlich am Anfang nach dem Laden der Seite.

Richtig.

Nun ist die Überlegung, wie ich es schaffe, dass die Methode auch aufgerufen wird, wenn die Seite per AJAX nachgefragt wird.

Befindet sich der fragliche JavaScript-Code in dem HTML-Code, der per Ajax geladen wird? Oder wird er am Anfang normal in die Seite eingebunden, wird also nicht nachgeladen?

In ersten Fall:
jQuery führt den Inhalt von script-Elementen in HTML automatisch aus, wenn das HTML mit Ajax geladen und ins Dokument eingefügt werden. Wenn du also HTML-Code lädst, der <script>…</script> beinhaltet und diesen mit jQuery ins Dokument einbaust, dann werden diese Scripte ausgeführt. Das heißt, auch dein Datepicker-Code sollte ausgeführt werden. Nach dem DOM-Ready führt jQuery die übergebenen Funktionen sofort aus, die $() bzw. $(document).ready() übergeben werden. Prüfe also erst einmal, ob der Code normal eingebunden wird und er von jQuery beim Einfügen ins DOM ausgeführt wird. Dann kannst du ggf. daran arbeiten, dass er auch in diesem Fall korrekt läuft.

Im zweiten Fall:
An der Stelle, an der du die Ajax-Antwort verarbeitest und ins Dokument einfügst, kannst du manuell den Datepicker initialisieren. Dazu führst du dieselbe Funktion zu dem Zeitpunkt noch einmal aus. Du musst natürlich sicherstellen, dass der mehrfache Aufruf möglich ist und nichts kaputt macht.

Beispielsweise

function initDatepicker () {…}  
$(document).ready(initDatepicker);

In deinem Ajax-Callback dann ebenfalls initDatepicker().

Alternativ kannst du auf Ajax-Events hören und initDatepicker automatisiert ausführen.

Mathias

[Helmut]

Hallo,
Danke für die Antwort.

Ich habe es nun mit einem Ajax-Callback gemacht das ich der jeweiligen AJAX-Anfrage angehängt habe.

Die Alternative, dass ich einfach alle AJAX-Anfragen abhöre, habe ich nicht gemacht, da es nicht bei allen AJAX-Anfragen benötige.