jQuery & AJAX

Gräflicher

Here to stay

Registered: Dec 2001
Location: Baden bei Wien
Posts: 976

11.03.2010 - 22:04

Hallo,
ackere gerade diverse jQuery Tuts durch. Eigentlich klappte das bisher ganz gut, doch jetzt hab ich ein Problem wo ich nicht mal weiß, was ich in Google eintippen könnte... :confused:

Es geht um folgende Seite:

http://ben.slezak.co.at/kames/light-0-0-0-0-.html

Im unteren Teil der Seite gibts Thumbnails, welche dann in einer Lightbox dargestellt werden.
Dazu verwende ich dies hier:
http://www.no-margin-for-errors.com.../documentation/

Soweit funktioniert dies ja auch.

Dann kommt noch eine 2te Funktion.

Die 2 Links "Maifest" und "Donauinselfest 2006" laden jeweils per $.get die jeweiligen Inhalte in das div.
Auch das funktioniert!

ABER: Die Lightbox funktioniert nur solange das Dokument "frisch" aufgerufen wurde und nicht wenn es per $.get verändert wurde.

d.h: Neu laden -->Alles funktioniert. Click auf "Maifest" oder "Donauinselfest 2006" --> die Lightbox funktioniert nicht mehr.

Leider weiß ich nicht genau was da alles im DOM passiert.
Die Lightbox klopft ihre Funktionalität ganz am Ende in alle <a href> mit rel="prettyPhoto":

Code: PHP

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){$("a[rel^='prettyPhoto']").prettyPhoto();});
</script>

Könnte mir nur vorstellen dass sich da 2 Sachen in die Quere kommen - im geparsden Quelltext schaut alles ganz normal aus. :confused:

Vielelicht hat ja wer einen Tipp, im Moment wüßt ich nicht nach was ich eigentlich Ausschau halten sollte.

Besten Dank

Bearbeitet von Gräflicher am 12.03.2010, 12:10

ica

hmm

Registered: Jul 2002
Location: Graz
Posts: 9818

11.03.2010 - 22:30

in deiner $.get callback funktion einfach das $("a[rel^='prettyPhoto']").prettyPhoto(); aufrufen.

ist ja auch klar: du fügst neue elemente zu deinem dom tree hinzu die natürlich nix von deinem pretty photo wissen. mit dem aufruf werden einfach alle a elemente durchsucht die rel=prettyPhoto haben und es wird vermutlich ein onclick handler zu dem element hinzugefügt.

Gräflicher

Here to stay

Registered: Dec 2001
Location: Baden bei Wien
Posts: 976

11.03.2010 - 22:43

Vielen Dank! An das hatte ich auch schon gedacht, allerdings nicht mit dem gwünschten Erfolg hingekriegt.

Code: PHP

	<script type="text/javascript" charset="utf-8" language="JavaScript">    

function show(id,ii) { 
$.get("media.php","wert="+id+"&index="+ii,
function(text){  $("div#ajaxinhalt").fadeOut('fast',function(){$("div#ajaxinhalt").html(text).fadeIn('normal'); });  });

$("a[rel^='prettyPhoto']").prettyPhoto();   }  

</script>

Habs in etwa so probiert, sowie in 10 anderen Variationen, aber nichts

Spikx

My Little Pwny

Registered: Jan 2002
Location: Scotland
Posts: 13504

11.03.2010 - 23:52

Das $("a[rel^='prettyPhoto']").prettyPhoto(); muss in die die function() von $.get bzw. fadeOut in deinem Fall, nachdem .html(text) gesetzt wurde. Denn in deinem code wird $("a[rel^='prettyPhoto']").prettyPhoto(); aufgerufen bevor der ajax response in das html eingefügt wurde.

Code: PHP

<script type="text/javascript" charset="utf-8" language="JavaScript">    

function show(id,ii)
{ 
	$.get("media.php","wert="+id+"&index="+ii,function(text)
	{  
		$("div#ajaxinhalt").fadeOut('fast',function()
		{
			$("div#ajaxinhalt").html(text).fadeIn('normal'); 
			$("a[rel^='prettyPhoto']").prettyPhoto();
		});  
	});
}  

</script>

Bearbeitet von Spikx am 11.03.2010, 23:57

Gräflicher

Here to stay

Registered: Dec 2001
Location: Baden bei Wien
Posts: 976

12.03.2010 - 02:50

Vielen Dank,
leider klappts so auch nicht

Das div wird zwar entladen, aber dann nicht mehr aufgefüllt. Lass ich die prettyPhoto-Zeile weg funktionerts wie gehabt. Hmm

Naja, es ist 3 in der Früh, Zeit zu schlafen

Bearbeitet von Gräflicher am 12.03.2010, 02:54

Gräflicher

Here to stay

Registered: Dec 2001
Location: Baden bei Wien
Posts: 976

12.03.2010 - 12:10

Löse die Lightbox nun per API-Call

Code: PHP
$.prettyPhoto.open

mittels Onclick direkt im href auf.

Wenn man dann nicht vergisst, dass man für die API ein eigenes Script einbinden muss, welches nirgends dokumentiert ist erspart man sich auch einige Stunden Arbeit

Vielen Dank für die Hilfe

Gräflicher Here to stay Registered: Dec 2001 Location: Baden bei Wien Posts: 976	11.03.2010 - 22:04 Hallo, ackere gerade diverse jQuery Tuts durch. Eigentlich klappte das bisher ganz gut, doch jetzt hab ich ein Problem wo ich nicht mal weiß, was ich in Google eintippen könnte... Es geht um folgende Seite: http://ben.slezak.co.at/kames/light-0-0-0-0-.html Im unteren Teil der Seite gibts Thumbnails, welche dann in einer Lightbox dargestellt werden. Dazu verwende ich dies hier: http://www.no-margin-for-errors.com.../documentation/ Soweit funktioniert dies ja auch. Dann kommt noch eine 2te Funktion. Die 2 Links "Maifest" und "Donauinselfest 2006" laden jeweils per $.get die jeweiligen Inhalte in das div. Auch das funktioniert! ABER: Die Lightbox funktioniert nur solange das Dokument "frisch" aufgerufen wurde und nicht wenn es per $.get verändert wurde. d.h: Neu laden -->Alles funktioniert. Click auf "Maifest" oder "Donauinselfest 2006" --> die Lightbox funktioniert nicht mehr. Leider weiß ich nicht genau was da alles im DOM passiert. Die Lightbox klopft ihre Funktionalität ganz am Ende in alle <a href> mit rel="prettyPhoto": Code: PHP `<script type="text/javascript" charset="utf-8"> $(document).ready(function(){$("a[rel^='prettyPhoto']").prettyPhoto();}); </script>` Könnte mir nur vorstellen dass sich da 2 Sachen in die Quere kommen - im geparsden Quelltext schaut alles ganz normal aus. Vielelicht hat ja wer einen Tipp, im Moment wüßt ich nicht nach was ich eigentlich Ausschau halten sollte. Besten Dank Bearbeitet von Gräflicher am 12.03.2010, 12:10
ica hmm Registered: Jul 2002 Location: Graz Posts: 9818	11.03.2010 - 22:30 in deiner $.get callback funktion einfach das $("a[rel^='prettyPhoto']").prettyPhoto(); aufrufen. ist ja auch klar: du fügst neue elemente zu deinem dom tree hinzu die natürlich nix von deinem pretty photo wissen. mit dem aufruf werden einfach alle a elemente durchsucht die rel=prettyPhoto haben und es wird vermutlich ein onclick handler zu dem element hinzugefügt.
Gräflicher Here to stay Registered: Dec 2001 Location: Baden bei Wien Posts: 976	11.03.2010 - 22:43 Vielen Dank! An das hatte ich auch schon gedacht, allerdings nicht mit dem gwünschten Erfolg hingekriegt. Code: PHP `<script type="text/javascript" charset="utf-8" language="JavaScript"> function show(id,ii) { $.get("media.php","wert="+id+"&index="+ii, function(text){ $("div#ajaxinhalt").fadeOut('fast',function(){$("div#ajaxinhalt").html(text).fadeIn('normal'); }); }); $("a[rel^='prettyPhoto']").prettyPhoto(); } </script>` Habs in etwa so probiert, sowie in 10 anderen Variationen, aber nichts
Spikx My Little Pwny Registered: Jan 2002 Location: Scotland Posts: 13504	11.03.2010 - 23:52 Das $("a[rel^='prettyPhoto']").prettyPhoto(); muss in die die function() von $.get bzw. fadeOut in deinem Fall, nachdem .html(text) gesetzt wurde. Denn in deinem code wird $("a[rel^='prettyPhoto']").prettyPhoto(); aufgerufen bevor der ajax response in das html eingefügt wurde. Code: PHP `<script type="text/javascript" charset="utf-8" language="JavaScript"> function show(id,ii) { $.get("media.php","wert="+id+"&index="+ii,function(text) { $("div#ajaxinhalt").fadeOut('fast',function() { $("div#ajaxinhalt").html(text).fadeIn('normal'); $("a[rel^='prettyPhoto']").prettyPhoto(); }); }); } </script>` Bearbeitet von Spikx am 11.03.2010, 23:57
Gräflicher Here to stay Registered: Dec 2001 Location: Baden bei Wien Posts: 976	12.03.2010 - 02:50 Vielen Dank, leider klappts so auch nicht Das div wird zwar entladen, aber dann nicht mehr aufgefüllt. Lass ich die prettyPhoto-Zeile weg funktionerts wie gehabt. Hmm Naja, es ist 3 in der Früh, Zeit zu schlafen Bearbeitet von Gräflicher am 12.03.2010, 02:54
Gräflicher Here to stay Registered: Dec 2001 Location: Baden bei Wien Posts: 976	12.03.2010 - 12:10 Löse die Lightbox nun per API-Call Code: PHP `$.prettyPhoto.open` mittels Onclick direkt im href auf. Wenn man dann nicht vergisst, dass man für die API ein eigenes Script einbinden muss, welches nirgends dokumentiert ist erspart man sich auch einige Stunden Arbeit Vielen Dank für die Hilfe

jQuery & AJAX

Forum Index > Software > Coding Stuff

Gräflicher

ica

Gräflicher

Spikx

Gräflicher

Gräflicher