nicht angemeldet
Lightbox nach AJAX Request
Hallo,
ich habe folgendes Problem:
Ich rufe über AJAX eine php-Seite auf, die je nach übergebenem Parameter einen anderen Inhalt aus einer Datenbank holt. Soweit so gut - funktioniert auch.
Bei diesem Inhalt handelt es sich um Bilder, welche komplett mit einem Link anschließend in die Hauptseite eingefügt werden.
Beim Klick auf ein Bild, öffnet sich eine Lightbox und zeigt das Bild im Großformat an.
Soweit funktioniert das aber nur, wenn ich die PHP-Datei direkt in meinem HTML-Code include.
Sobald ich die Seite über den AJAX-Umweg in die Seite einbringe (per document.getElementByID("content").innerHTML = ajax.responseText) , funktioniert der Aufruf der Lightbox aber nicht mehr.
Ich vermute, dass es daran liegt, dass dieser Code nicht von Anfang an vom Browser geparst wird, sondern erst später - wenn die Seite geladen ist.
Wie kriege ich es nun hin, dass die Lightbox doch angesprochen werden kann?
Oder gibt es vielleicht generell einen einfacheren Weg?
Bitte helft mir!
Gruß
choosen0ne
-
Hallo,
Sobald ich die Seite über den AJAX-Umweg in die Seite einbringe (per document.getElementByID("content").innerHTML = ajax.responseText) , funktioniert der Aufruf der Lightbox aber nicht mehr.
siehe molilys Hinweise zum gleichen Problem.
Freundliche Grüße
Vinzenz
-
Hallo,
ja genau wie es da beschrieben ist, habe ich mir das auch gedacht...
Nun, vielleicht kann mir jemand dann in Bezug auf diesen Beitrag bei der Problemlösung helfen.
So wie ich das sehe, ersetze ich den Aufruf über den class="lbOn" Tag, durch einen normalen Javascript Aufruf.
Also muss ich den entsprechenden Befehl finden.
Da hab ich aber schwierigkeiten.
Ich benutze die Lightbox Gone Wild! (http://particletree.com/features/lightbox-gone-wild/)Wenn ich mir den Source des JS angugge, kommt noch am ehesten der Aufruf in der function initialize() in Frage - allerdings ist mir auf Grund meiner noch begrenzten Kenntnisse leider nicht ganz klar, wie ich da etwas verwertbares raus erhalte.
Vielen Dank für die Hilfe bisher schonmal
Gruß
choosen0ne-
Was tust du ? Du bindest neuen Inhalt per Ajax Request in dein HTML Dokument ein...
Was tut Lightbox ? Es initialisiert alle Images Onload einmal.
Woher weiß Lightbox welche neugeladenen Objekte reinitialisiert werden ?
Deswegen sende nach jedem Ajax Request am ende folgende Java Initialisierung erneut.
Bsp.: ajaxrequest.php
<? code... ?>
<script type="text/javascript">
dbox = document.getElementsByClassName('dataload1');
for(i = 0; i < dbox.length; i++) {
valid = new databox(dbox[i]);
}
</script>-
Achja ich benutze 2 IDs (oder in meinem Bsp.) jedesmal 2 Class Namen für diese Lösung.
1x Für Onload der Seite (beim Erstmaligen Laden) suche nach dataload
Bei allen requests die ich nachträglich hineinlade dataload1.
ist sicherer. und weniger Fehleranfällig bei Scripts wie Lightscript goes Wild etc.
PS: new Ajax.Updater('dataloadinputbox', '/ajax/php/ajaxfilemanager.php5'+this.content,
{onLoading:function(){},
onComplete:this.processData,
method:'get',
asynchronous:true,
evalScripts: true });
},
processData: function(response){
Effect.BlindDown($('dataloadinputbox'),{asynchronous:true});
Effect.Appear($('dataloadinputbox'), {asynchronous:true,duration: 0.8 });
$('dataloadinputbox').innerHTML = request.responseText;
}
}evalScripts: true <- wenn du die Prototype Library nutzt..
-
Okay, also die Lösungsstrategie ist mir klar... Nur was dein Code im zweiten Post genau bewirken soll ist mir leider schleierhaft.
Wenn ich das ganze aber mal für mich - und meinen Anwendungsfall mit Lightbox gone Wild weiterdenke, dann müsste ich einfach nach jedem AJAX-Request die function initialize() einfach neu aufrufen!?.
Prinzipiell tut das dein erster Code ja auch in etwa, nur mit anderen Funktionsnamen..
Mein "Vorteil" ist, dass jeglicher Inhalt, der per Lightbox dargestellt werden soll, immer erst durch AJAX in die Site eingebunden wird, also müsste ich ja eigentlich damit auskommen, einfach initialize() neu aufzurufen... Funktioniert aber irgendwie nicht.
Habe es sowohl in der PHP-Datei die den AJAX-Inhalt liefert probiert, als auch - was mir geschickter erscheint - direkt in der AJAX-Request:
function catchooser(id) {
ajax.open('POST', './scripts/thumb.image.functions.php', true);
ajax.onreadystatechange = printout;
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajax.send('id='+id);
}function printout() {
if (ajax.readyState == 4) {
if (ajax.status == 200) {
document.getElementById("content").innerHTML = ajax.responseText;
initialize();
}
}
}
-
-
-
-