Baumstrukturmodus | Linearer Modus

***Toasterfraktion***

Hallo,
ich komme noch nicht so ganz mit den Selectors von JQuery zurecht.

Ich habe diese Struktur:

<div class="test">
   <img o<strong></strong>nclick="banner_request(1);" class="test_image" src="request_banner.png" alt="Banner Anfordern!" />
</div>

Es soll beim klicken auf das Bild folgendes passieren:

JAVASCRIPT Programming

function banner_request(id){
   $(????).html("Banner")
}

Es soll, wenn auf das Bild geklickt wird, Text in das "test div" eingetragen werden.

Ich kann leider nicht einfach $(.test).html("Banner"); nehmen da ich mehrere "test divs" haben werde.

Wie komme ich von dem img Tag mit dem Selector in das testdiv? Ich werde hieraus nicht schlau!

Gruß,
Toasterfraktion

Google · 11-05-2008, 03:40 PM

diewie

So ist das leider nicht umzusetzten. Mit deiner onclick-Implementierung wird der Kontext nicht mit übergeben. Diesen kann man zwar bei manchen Browsern (z.B. IE) mit window.event wieder holen. Safari z.B. gibt in diesem Fall auch das falsche target zurück. Also ist dies nicht das Mittel der Wahl.

Eleganter ist es allemal, HTML und JavaScript zu trennen. Das könntest du mit jQuery so machen:

JAVASCRIPT Programming

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Test</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
<script type="text/javascript">
$(document).ready(function() {
	$(".test_image").click(function() {
		var arrId = this.id.split('_');
		if (arrId[0] == 'banner') {
			var bannerId = arrId[1];
			$(this).parent().get(0).innerHTML = 'clicked on banner ' + bannerId;
		}
	});
});
</script>
</head>
<body>
<div class="test">
	<img id="banner_1" class="test_image" src="request_banner.png" alt="Banner Anfordern!" />
</div>
<div class="test">
	<img id="banner_2" class="test_image" src="request_banner.png" alt="Banner Anfordern!" />
</div>
</body>
</html>

Hier hat jQuery den Kontext mit this. Mit parent() kannst du das div auswählen und dann manipulieren. Wichtig ist die id bei den Bildern, denn daraus wird die BannerId gewonnen.

Viele Grüße,
Stefan

Edit: Warum verwirft das Code-Tag manche Tabs?

***Toasterfraktion***

Hey, danke schonmal für deine Antwort, ich möchte nun einfach nurnoch einen $post request machen.

JAVASCRIPT Programming

$.post('inc/ajax_request/request_banner.php'{banner_id:banner_Id},function(callback){
 
 $(this).parent().get(0).innerHTML = callback;
});

Ich habe es hinter var bannerId = arrId[1]; gesetzt, also so:

JAVASCRIPT Programming

$(document).ready(function() {
 
	$(".test_image").click(function() {
		var arrId = this.id.split('_');
 
		if (arrId[0] == 'banner') {
			var bannerId = arrId[1];
 
			$.post('inc/ajax_request/request_banner.php',{banner_id:banner_Id},function(callback){
				$(this).parent().get(0).innerHTML = callback;
			});
		}	
	});
});

Warum funktioniert es denn nun nicht?

Zitat:Edit: Warum verwirft das Code-Tag manche Tabs?

Das frage ich mich auch grade, ich werde mich mal darüm bemühen!

diewie · 22-02-2009, 03:10 PM

Das funktioniert nicht, da this wieder einen anderen Kontext hat. Du kannst z.B. aber aus den gesendeten Daten wieder mit der Id das Bild raussuchen und dann über parent() wieder ins div gehen:

JAVASCRIPT Programming

$(document).ready(function() {
	$(".test_image").click(function() {
		var arrId = this.id.split('_');
 
		if (arrId[0] == 'banner') {
			var bannerId = arrId[1];
 
			$.post('inc/ajax_request/request_banner.php', {banner_id: bannerId}, function(data){
				var bannerId = this.data.split('=')[1];
				$('#banner_' + bannerId).parent().get(0).innerHTML = data;
			});    
		}    
	});
});

***Toasterfraktion***

Da liegt also immer der Fehler, ich habe mir schon gedacht dass sich this immer verändert, jenachdem wo man es benutzt.
Was würde denn in this "stehen" wenn ich es in der $post Anweisung benutzen würde?

Danke nochmal, es funktioniert und ich habe es nun auch verstanden!

diewie · 22-02-2009, 04:10 PM

In this steht in diesem Fall etwas über den XHR, ebenso die zurückgegebenen Daten und die gesendeten Daten (welche wir ja hier verwenden).

Zum Debuggen von JS kann ich Firebug für Firefox empfehlen. Damit kann man sich z.B. mit conolse.debug() Variablen ausgeben lassen. Dabei sieht man dann in der Console wie diese momentan aussehen bzw. welche Struktur diese haben. Desweiteren sind auch die Breakpoints sehr praktisch. Und natürlich kann man damit auch noch viele andere Dinge analysieren.

***Toasterfraktion***

Ich dachte ich hättes es nun verstanden, doch nun möchte ich einfach nur die Ajax Ladengrafik einbinden und schon ist this wieder komplett etwas anderes.
Wie kann ich überprüfen wo this grade steht, oder beinhaltet?
Hier nochmal der Code:

JAVASCRIPT Programming

$(".test_image").click(function() {
	var arrId = this.id.split('_');
 
	$(this).parent().get(0).innerHTML = banner_loader; // hier soll die Ladegrafik eingeblendet werden
 
	if (arrId[0] == 'banner') {
		var bannerId = arrId[1];
 
		$.post('inc/ajax_request/request_banner.php', {banner_id: bannerId}, function(data){
 
			var bannerId = this.data.split('=')[1];
			$('#banner_' + bannerId).parent().get(0).innerHTML = data;
 
		});    
	}
	// hier soll die Ladegrafik ausgeblendet werden
});

Firebug habe ich installiert, ich versuch mal es für meine Zwecke einzusetzen!

diewie · (Dieser Beitrag wurde zuletzt bearbeitet: 22-02-2009 04:58 PM von diewie.)

Du überschreibst mit dem Ladebild ja das andere Bild, das uns als "Ziel" dient, wenn der Callback ausgeführt wird. Du kannst einfach dem Loaderbild die gleiche Id geben, dann ist das kein Problem:

JAVASCRIPT Programming

$(document).ready(function() {	
	$(".test_image").click(function() {
		var arrId = this.id.split('_');
 
		$(this).parent().get(0).innerHTML = '<img id="' + this.id + '" src="ajax_loader.gif" alt="Lade..." />'; 
 
		if (arrId[0] == 'banner') {
			var banner_Id = arrId[1];
 
			$.post('inc/ajax_request/request_banner.php', {banner_id: banner_Id}, function(data){
				var bannerId = '#banner_' + this.data.split('=')[1];
				console.debug($(bannerId));
				$(bannerId).parent().get(0).innerHTML = data;
			});    
		}
	});
});

***Toasterfraktion*** · 22-02-2009, 05:07 PM

Okay, so klappt es, werde mal versuchen das zu verstehen.

console.debug($(bannerId)); ist doch bestimmt für FireBug gut oder? Bei mir wird aber nichts im Firebug angezeigt!

Möglicherweise verwandte Themen...
Thema:		Verfasser	Antworten:	Ansichten:	Letzter Beitrag
	[jQuery] Immer die nächste Klasse ansprechen	MixCool	4	984	16-06-2009 07:54 PM Letzter Beitrag: diewie
	[jQuery] PHP nach intervall per Ajax nachladen; IE-Bug fixed	Toasterfraktion	2	1,262	18-01-2009 08:21 PM Letzter Beitrag: Toasterfraktion
	[jQuery] Frage zu den Selectoren	Toasterfraktion	2	590	17-01-2009 09:08 PM Letzter Beitrag: Toasterfraktion
	[jQuery] Link	MixCool	8	941	17-01-2009 05:49 PM Letzter Beitrag: diewie
	[jQuery] Change-Ereignis	MixCool	4	739	07-01-2009 11:34 AM Letzter Beitrag: MixCool