solaris-ch
Goto Top

Java Script Probleme mit Fancybox und XMLHttpRequest

Ich steh vorm Berg. Aber ich weiss, wo mir geholfen wird face-wink

Liebe Alle.

1. Ich habe eine Seite: index.php
2. in dieser index.php gibt es im Header JS Code, welcher auf gewisse Links die mit <p id="lightboxid"> link </p> eingepackt, eine Fancybox erstellt:
<script type="text/javascript" src="class/fancybox/jquery-1.2.3.pack.js"></script>  
<script type="text/javascript" src="class/fancybox/jquery.fancybox-1.0.0.js"></script>  
<script type="text/javascript" src="class/fancybox/jquery.pngFix.pack.js"></script>  
<link rel="stylesheet" href="class/fancybox/fancy.css" type="text/css" media="screen">  

<script type="text/javascript">  
   $(document).ready(function() {
   $("p#Bild1 a").fancybox();  

      $("p#lightmerkliste a").fancybox();  
     
      $("a#lightmerkliste").fancybox({  
           'zoomSpeedIn':10,  
           'zoomSpeedOut':10  
       });
              
    });
4. In der index.php gibt es ein DIV mit der ID "changediv"
5. In diesem DIV ersetze ich den Inhalt anhand JS mit dem von einer PHP Seite (B = xipindex.php) welche im Hintergrund geladen wird mit folgendem Code:
function sendRequest(cli) {
        var req;
        try {
                req = window.XMLHttpRequest?new XMLHttpRequest():
                new ActiveXObject("Microsoft.XMLHTTP");  
                document.getElementById('myContent').innerHTML = '<img src="img/preloader.gif"><br />ULL Live-Check f&uuml;r Nummer: '+cli+'<br /> in Bearbeitung...';  
        } catch (e) {
                //Kein AJAX Support
        }
 
        req.onreadystatechange = function() {
                if ((req.readyState == 4) && (req.status == 200)) {
                        document.getElementById('myContent').innerHTML = req.responseText;  
                }
        };
        var id = cli;
        req.open('post', 'xipindex.php');  
        req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');  
        req.send('cli='+ id);  
}
6. In dem Inhalt welcher von B zurückgeliefert wird, steckt ein Link welcher wiederum in ein <p> eingepackt ist:<p id=\"lightmerkliste\"> <a href="zielseite.php">Klick mich</a></p>.

Alles klappt. Nur geht bei einem Klick auf den in 6. beschriebenen Link keine Fancybox auf. Und ich weiss nicht mehr weiter. Anzumerken gibt es noch, das alle anderen verwendeten Fancyboxen tiptop funktionieren. Hoffe ihr versteht wo der Schuh drückt. Und da ich von JS nicht wirklich die Ahnung habe geschweige mit den Frameworks, bin ich doch etwas am Anschlag und hoffe auf Hilfe von den Profis.

Liebe Grüsse und vielen Dank!

Content-ID: 128072

Url: https://administrator.de/contentid/128072

Ausgedruckt am: 15.11.2024 um 23:11 Uhr

Snowman25
Snowman25 28.10.2009 um 09:31:12 Uhr
Goto Top
probiers doch mal Probehalber mit FancyZoom (hat meiner Meinung nach auch den schöneren Effekt)
für den muss man die bilder nichtmal kennzeichnen...

Ausserdem:
ID's dürfen nur einem einzigen Element zugeordnet werden.
bist du sicher, dass jede ID nur ein einziges mal verwendet wurde?
solaris-ch
solaris-ch 28.10.2009 um 09:45:16 Uhr
Goto Top
Hallo Snowman25

ich glaube nicht, das mein Problem mit der Verwendung eines anderen Scriptes gelöst ist.

Das mit den ID's ist ein sehr guter Hinweis. Habe es geprüft, muss aber sagen dass keine ID doppelt vergeben ist. Wäre ja auch zu schön gewesen face-wink

Beste Grüsse
godlie
godlie 28.10.2009 um 10:59:29 Uhr
Goto Top
hallo,

dein Problem ist ganz einfach zu lösen.
du musst deiner Fancybox doch auch sagen das da jetzt ein neuer Link da ist, der doch auch
von ihr behandelt werden sollte.

Sprich schau dir mal an was Fancybox in der Initialiserung macht.

Edit:
wenn ichs richtig gesehen habe dann dürfte es sich um die _start function handeln, welche
sich alle elemente holt...
Arano
Arano 28.10.2009 um 15:58:06 Uhr
Goto Top
Mal in einer Kurzfassung:
  1. alle lightboxen in fancyboxen umwandeln
  2. eine neue lightbox erstellen

Wieso sollte die neue lightbox nun eine fancybox sein ? (die wurde doch nicht umgewandelt !)

Ändere also einfach die Reihenfolge:
  1. eine neue lightbox erstellen und danach
  2. alle lightboxen in fancyboxen umwandeln


~Arano
solaris-ch
solaris-ch 29.10.2009 um 10:58:36 Uhr
Goto Top
Hallo zusammen

Problem gelöst. Hier noch für die Nachwelt eine Zusammenfassung:

Da ich mit AJAX eine PHP Seite nachgeladen habe, war Fancybox für diesen Inhalt gar nicht gültig. Dementsprechend habe ich in der onreadystatechange Funktion vom Preloader einfach noch die Fancybox nochmals instantiiert. Voilà.

Einfacher als gedacht face-wink

Trotzdem herzlichen Dank für Eure Hilfe! Das nächste Problem lässt bestimmt nicht lange auf sich warten face-wink
godlie
godlie 29.10.2009 um 11:03:59 Uhr
Goto Top
Hm irgendwie kommt mir so vor als hätt ich das weiter oben geschrieben ....
solaris-ch
solaris-ch 29.10.2009 um 11:43:56 Uhr
Goto Top
Zitat von @godlie:
Hm irgendwie kommt mir so vor als hätt ich das weiter oben
geschrieben ....

Jup, du hast das so schön umschrieben, dass ich das gar nicht gerafft habe face-wink.
Aber im Nachhinein noch ein Danke!

Grüsse