jQuery & AJAX

Seite 1 von 1 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/jquery_ajax_214811/page_1 - zur Vollversion wechseln!

Gräflicher schrieb am 11.03.2010 um 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

ica schrieb am 11.03.2010 um 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 schrieb am 11.03.2010 um 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 schrieb am 11.03.2010 um 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>

Gräflicher schrieb am 12.03.2010 um 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

Gräflicher schrieb am 12.03.2010 um 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