✔ Inhalt mit Ajax laden und in der Fancybox anzeigen

[aurus]

Hallo,

ich versuche Inhalt per Ajax nachzuladen (klappt) und diesen in der Fancybox anzuzeigen (klappt leider nicht, bzw. nicht so wie ich will). Dabei soll man auf einen Text klicken und es lädt die Fancybox mit dem nachgeladenen Inhalt.

Es klappt nur, wenn man zweimal auf den Link klickt. Warum weiß ich nicht. Wahrscheinlich das erste mal der Ajax-Request, der den Content in die Seite lädt und das andere mal der Aufruf für die Fancybox. Aber es soll wie gesagt alles mit einem klick gehen.

Ich hab also eine einfache Funktion gebaut, die bei Klick auf einen Text den Inhalt lädt und ihn in einem anderen DIV anzeigt. Das klappt soweit. Nur das mit der Fancybox nicht, bzw. nur mit zwei Klicks

Mein Problem ist glaube ich einfach die Fancybox, ist schon länger her, dass ich mich damit beschäftigt habe. Und ich nutze noch die Fancybox Version 1.3.4
Ich habs schon mit live() versucht, aber das klappte leider nicht?

<div id="navi">
    <a class="fancy" href="#ajaxDIV" title="make.php">Text</a>
</div>

<div style="display:none">
    <div id="ajaxDIV">
    <!-- zu ladender Content -->
                
    </div>
</div>

           function loadPage(obj, target){      
                if(!obj.length || !target.length)
                    return;
                obj.click(function(e){
                    e.preventDefault();
                    var url = $(this).attr("title");
                    target.hide(function(){
                        target.load(url, function(){
                            target.show();
                        });
                    });
                });
            }  
           $(document).ready(function(){
                loadPage($("#navi a"), $("#ajaxDIV"));
         
           });

Und mit diesem Code rufe ich für gewöhnlich die Fancybox auf:

                          $(".fancy").fancybox({
                            'scrolling'		: 'no',
                            'titleShow'		: false,
                            'width'                 : 'auto',
                            'height'                : 800
                        });

 

[aurus]

Wäre echt toll, wenn mir da jemand weiterhelfen könnte

Muss auch nicht auf meinen Code aufbauen, solange das passiert, was passieren soll^^

 

[MarcelD]

Hy,

hast du mal versucht beim

target.load(url, function(){
                            target.show();

das Click-Event nachträglich zu triggern?

target.load(url, function(){
                            target.show();
target.trigger('click');

Gruß, MarcelD

 

[aurus]

Nein, das geht auch nicht. Wieder nur mit zwei Klicks auf Text

Ich muss den Code für die Fancybox wohl irgendwie in meine Funktion bekommen. ich weiß nur nicht wie :/

Und wenn ich das andersherum mache? Also erst die Fancybox lade und dann da den Request starte? Weil im Moment versuche ich es ja andersherum. Also erst den Inhalt auf die Seite ins DIV und dann die Fancybox aufrufen. Vielleicht ist andersherum besser?!

 

[MarcelD]

Jop Jop erst den load dann den Fancy, so kannst du vorab schon checken ob der load soweit oje ist....
Allerdings sollte es egal sein was als erstes kommt da fancy ja nur den div darstellt du den Inhalt jedoch noch ändern kannst.

function loadPage(obj, target){      
                if(!obj.length || !target.length)
                    return;
                obj.click(function(e){
                    e.preventDefault();
                    var url = $(this).attr("title");
                    target.hide(function(){
                        target.load(url, function(){
                            target.show();
                        });
                    });
                });
            }

würde ich kürzen auf

function loadPage(obj, target){      
                if(!obj.length || !target.length)
                    return;
                obj.click(function(e){
                    e.preventDefault();
                    var url = $(this).attr("title");
                    target.load(url).fancybox({
'scrolling'		: 'no',
'titleShow'		: false,
'width'                 : 'auto',
'height'                : 800
});;
                    });
                });
            }

Versuchs mal

Gruß, MarcelD

 

[aurus]

Das mit dem Ein- und Ausblenden hatte ich auch nur als Test, um zu sehen, ob das Holen klappt. Leider funktioniert es mit deinem Vorschlag immer noch nicht.

Jetzt passiert gar nichts mehr. Vorher kam jedenfalls eine leere Fancybox und mit dem zweiten Klick die Fancybox mit dem richtigen Inhalt.

Bin gerade etwas am Verzweifeln. Vielleicht sollte ich es einfach nochmal von vorne versuchen?!

 

[MarcelD]

Ich habe mir mal den Spaß gemacht und den Quark auseinander genommen.

<script>
$(document).ready(function(){
	var url = "";
	$("a#inline").click( function (e){
		url	= $(this).attr("title")+".php";
	});
	$("a#inline").fancybox({
		onStart:function(){
			$('#data').load(url);
			alert(url);
		}	
	});
})

</script>

</head>

<body>
<a id="inline" href="#data" title="content">This shows content of element who has id="data"</a>
<div style="display:none"><div id="data">a</div></div>

</body>
</html>

so sollte es laufen....
Der erste click Handler holt sich die Url.
Der Fancybox-Handler bekommt beim onStart die Anweisung den neuen Inhalt anhand der vorher gesetzten URL zu laden.



Gruß, MarcelD

 

[aurus]

Danke für deine Mühe, aber das löst das Problem leider auch nicht. Nach wie vor startet der erste Klick die Fancybox (erscheint nur ein ganz schmaler Streifen mit Schließ-Button). Schließt man sie und klickt erneut, hat man das gewünschte Resultat.

Ich werde jetzt noch mal ransetzen. Danke für die Hilfe soweit

 

[aurus]

Och mann, ich könnte...
Das Problem ist gelöst. Ich habe mir nochmal ein bisschen rumgestöbert und mit Quellcodes angeguckt und siehe da. Meine Fancyboy hat das alles schon onboard. Funktionen selber schreiben und rumrätseln war vollkommen sinnlos.

So einfach geht es:

        <script>
        $(document).ready(function(){
            $(".fancy").fancybox({
                            'scrolling'		: 'no',
                            'titleShow'		: false,
                            'width'                 : 'auto',
                            'height'                : 800
           });
        });
        </script>

        <a class="fancy" href="make.php" title="Test">Test</a>

Naja, klarer Fall von viel zu kompliziert gedacht. Wahrscheinlich haben sich die Funktionen irgendwie gegenseitig behindert. Danke auf jeden Fall für die Hilfe