jQuery Selektor (dynamische Auswahl)

[suntrop]

Hallo.

Ich versuche mittels jQuery ein bestimmtest Bild auf meiner Seite zu ändern. Aber ich kann dieses bestimmte Bild nicht auswählen – vielleicht habe ich auch nur ein Brett vorm Kopf.

Folgender Code wird ausgeführt, wenn eine AJAX-Aktion erfolgreich ausgeführt wurde:

$('h1 a#19 img').attr({src : "images/favorites.png"});

Es geht um die id (hier 19), die dynamisch sein muss. Folgendes funktioniert offensichtlich nicht:

$('h1 a#' + this.id + ' img').attr({src : "images/favorites.png"});

Wie bekomme ich in den Selektor die ID des Objektes rein, die gerade geklickt wurde?

Habe irgendwie das Gefühl es geht einfacher als ich will, nur komme ich nicht drauf

 

[Gumbo]

IDs müssen mit einem Buchstaben beginnen.

 

[suntrop]

Ja, ich weiß. Aber wenn ich die Zahl direkt rein schreibe, dann funktioniert es.

Wie soll ich das handeln? Die id in der Datenbank hat keine Buchstaben.

 

[Sven Mintel]

Wie/wo genau erfolgt diese Anweisung?
Vom Prinzip her ist alles richtig, die Frage ist, worauf sich this bezieht.

 

[suntrop]

Ich habe eine LIste mit vielen Usern. Als Titel haben alle User folgendes:

<h1>{$inhalt.firma} <a href="{$inhalt.id}" class="makeFavorite" id="{$inhalt.id}" title="Als Favorit speichern"><img src="images/{if $inhalt.favorit == 1}favorites.png{else}favorites2.png{/if}" width="16" height="16" alt="" /></a></h1>

Wenn ich auf die Grafik klicke, dann wird der Status in der DB geändert und abhängig vom Status wird entweder Grafik 1 (ist Favorit) oder Grafik 2 (ist nicht Favorit) zurückgeliefert.
Und genau diese Rückgabe will ich verarbeiten:

$('.makeFavorite').click(function() {
$.ajax({
	type: "POST",
	url: "make_favorite.php",
	data: "id=" + $(this.id),
	success: function(msg) {
		alert('Data saved: ' + msg);
		$('h1 a#19 img').attr({src : "images/"+msg+".png"});
	}
});
return false;
});

Bislang steht die id (19) noch "fest" im Code. Aber die soll von dem Element kommen, auf das geklickt wurde.

 

[Sven Mintel]

Mit "this" nimmst du in der success-Funktion Bezug auf die Optionen des Requests, also momentan type, url, data und success.

Wenn du die ID in der Funktion benötigst, notiere sie als Option

$('.makeFavorite').click(function() {
$.ajax({
	type: "POST",
	url: "make_favorite.php",
	data: "id=" + $(this.id),
        id:this.id,
	success: function(msg) {
		alert('Data saved: ' + msg);
		$('h1 a#'+this.id+' img').attr({src : "images/"+msg+".png"});
	}
});
return false;
});

 

[suntrop]

Danke Sven.

Was ist eine "Optionen des Requests"?

Ein weiteres Hindernis ist die Rückgabe der PHP-Datei. In msg steht der Dateiname des Bildes, das angezeigt werden soll.
Wenn ich den Inhalt von msg per alert() oder innerHTML ausgebe, dann steht dort der korrekte Dateiname.
Aber das Bild wird nicht angezeigt. Das vorherige verschwindet lediglich. Wie kann das sein?

 

[Sven Mintel]

Die Optionen sind die Eigenschaften des Objektes, welches du ajax() als Parameter übergibst.

Die Parameter stehen ja in geschweiften Klammern, das ist eine Objekt-Notation.
Die Eigenschaften werden notiert nach dem Schema

Eigenschaftsname:Eigenschaftwert

wenn du jetzt also dort notierst:

id:this.id

dann ist "id" der Name der Eigenschaft(Option)....und this.id ist die id des auslösenden Objektes.
So bleibt diese id später verfügbar, denn auf das den click-Event auslösende Objekt hast du bei der Antwort vom Server keinen unmittelbaren Zugriff mehr.

Was das andere betrifft:
Ist das irgendwo online, stimmt der Pfad?
Ich hab das mal nachgestellt, und es funktioniert bei mir.
Werden bei der Antwort evtl. Leerzeichen ausgegeben...diese könnten stören.

 

[suntrop]

Hallo Sven. Danke für deine ausführliche Erläuterung. Ich glaube ich habe es verstanden. Ist gar nicht so einfach, wenn man das zum ersten Mal liest

Ich werde mir vielleicht eines der jQuery Bücher zu Gemüte führen. Hoffentlich ist das nicht wieder nur eine gedruckte Version der online Doku.


Was die Sache mit der Rückgabe msg angeht weiß ich auch nicht woran es liegt. Jetzt habe ich es so geändert, dass der komplette Pfad (images/favorites.png) statt nur der Dateiname zurückgegeben wird. Und so funktioniert es auch.
Ich habe bislang keine Online-Version. Leerzeichen hatte ich auch "weg geworfen".
Vielleicht sollte es einfach nicht sein Und mit vollem Pfad geht es ja jetzt.


Grüße - suntrop