✔ Fanybox2

D

danieldagobert

Mitglied
Hi,

komme einfach nicht weiter, auch wenn es vielleicht für den ein oder anderen einfach erscheint.

Ich habe eine HTML Seite in der ich per Button eine Fancybox lade. Diese Fancybox lädt in den Iframe eine andere Seite.
Dort kann man dann etwas speichern oder man schließt die Fancybox ohne etwas zu speichern. Nur hier jetzt mein Anliegen wie unterscheide ich jetzt, ob ich close oder save gedrückt habe. Ich kann mit der Fancybox per onClosed eine Funktion auslösen, nur die löst ja immer aus, den wenn ich gespeichert habe wird das Fenster ja auch geschlossen. Ich weiß nicht wie ich entweder von dem JS das die Fancybox auslößt, auf ein Event reagiere oder aus der Fancybox mit dem JS, nach schließen auf die aktuelle Seite ein Event auslöse???

Ich hoffe ich habe mein Problem einigermaßen rüber gebracht.

Gruss
 
Liegen denn beide Seiten unter derselben Domain? Dann könntest Du auf der Seite im iFrame einen Checkbutton "Speichern" anbringen und auf der Elternseite abfragen, wenn Du die Lightbox verlässt.
 
Habe mir dein Posting nochmal durchgelesen und wahrscheinlich habe ich dich falsch verstanden: Du meinst wahrscheinlich, dass auf der Seite im iFrame gespeichert wird und dass beim Schliessen der Fancybox davon abhängig auf der Elternseite etwas gemacht werden soll. Dann würde ich direkt beim Speichern dieses in einer Variablen auf der Elternseite vermerken und dann beim Schließen diese Variable auswerten. Wie Du auf die Elternseite zugreifen kannst, kannst Du z. B. hier nachlesen:
http://stackoverflow.com/questions/...rom-iframe-to-parent-page-javascript-function
 
Zuletzt bearbeitet:
Danke Dir erstmal, super das du nochmal geschrieben hast!

Ich schaue mal ob das klappt.
Ich habe eine datei.php die beim aufruf eine Tabelle zeigt, click ich auf eine Reihe und wähle im Kontextmenü bearbeiten, öffne ich mit der Fancybox wieder die datei.php, nur mit einem GET Parameter action edit. Der dafür sorgt das sich in der Fancybox ein Form mit der Tabellenreihe enthalten Werten öffnet. Die ich dann ändern kann und speichern oder die Fancybox einfach schließe. Beim schließen soll natürlich mit der Tabelle nichts passieren nur wenn ich speicher.
 
Leider geht das nicht oder ich habe ein Brett vor dem Kopf.
Der im iframe geladene Content hat eine eigene .js Datei über der ich das Speichern usw erledige.
Von hier aus möchte ich jetzt auf mein .js, dass für die Tabelle ist, auf der Hauptseite zugreifen.
Das alles liegt in einer .php Datei und wird halt je nach GET action ausgelöst.
Das Problem müssen doch eigentlich alle haben die schon mal was mit der Fancybox gemacht haben?
Ich will halt einfach vermeiden das unnötige Anfragen und Daten geladen werden, wenn ich die Fancybox einfach nur schließe.
 
Ok, also das ist meine php Datei.
PHP: 
<?php
include($_SERVER['DOCUMENT_ROOT'].'/inc/php/db_local_verbindung.inc.php');
include('inc/php/allgemein.php');
include('inc/php/sui_warengruppen.php');

if(count($_GET) == 0){
    doctype('Warengruppen');

    //spezifische CSS und JS Dateien -->
    echo'<link rel="stylesheet" type="text/css" href="inc/css/warengruppen.css"            >';
    echo'<link rel="stylesheet" type="text/css" href="inc/css/tabelle.css"                >';
    echo'<script type="text/javascript" src="inc/js/tabelle.js"                            ></script>';
    echo'<script type="text/javascript" src="inc/js/warengruppen.js"                    ></script>';
    echo'</head>';
    echo'<body>';

    loader();
    kopfleiste();
    tabelle("Warengruppen", "");
  
    echo'</body>';
    echo'</html>';
  
    exit;
}

if($_GET['action'] == 'new'){
    doctype_leer('Neue Warengruppe');
    echo'<link rel="stylesheet" type="text/css" href="inc/css/warengruppe_new.css">';
    echo'<script type="text/javascript" src="inc/js/warengruppe_new.js"    ></script>';
    echo'</head><body>';  
    fancyneu_warengruppe('Warengruppe');
  
    exit;
}
?>

Mit der warengruppen.js die oben geladen wird öffne ich die Fancybox...

Javascript: 
jQuery(document).on('click', '#btn_neu', function() {
      
        try {
              
                jQuery(this).attr('disabled', 'disabled');
          
                jQuery.fancybox({
      
                    width        : 400,
                    height        : 243,
                    maxWidth    : 400,
                    maxHeight   : 243,
                    padding      :     '0',
                    autoSize    :     false,
                    closeBtn    :     false,
                    openEffect  :     'none',
                    closeEffect :     'none',
                    type        :     'iframe',
                    helpers     :     {     // verhindert das Schließen wenn CLICK Ausserhalb der fancybox
                                        overlay : {closeClick: false}
                                    },
                    href          :     'warengruppen.php?action=new',
                    afterLoad    :  function(){                                 
                      
                    },
                    beforeClose :  function(){
                                                     
                    },
                  
                });

                function abc(){
                    alert('blabla');
                }
          
            }catch (e) {
                alert (e.message);
            }
      
    });

Und in der warengruppe_new.js steht dann folgendes. Hier möchte ich dann nach schließen irgendeine Funktion in warengruppe.js ausführen.

Javascript: 
jQuery(document).on('click', '#btn_close', function() {
  
    parent.jQuery.fancybox.close();
    parent.abc();
      
});

jQuery('#btn_speichern').attr('disabled','disabled');
  
    if(jQuery('#name').val() == ""){
      
        jQuery('#name').css('border-color','#F00');
        jQuery('#btn_speichern').removeAttr("disabled"); 
        return false;
      
    }else{
      
        jQuery('#name').css('border-color','#736357');
      
        var aktiv;
        if(jQuery('#aktiv').is(':checked')){
          
            aktiv = 1;
          
        }else{
          
            aktiv = 0;
        }
      
        var datastring = $("#warengruppe_form").serialize();
        console.log(datastring);
  
        jQuery.ajax({
        type: 'POST',
        url: 'inc/php/sui_warengruppen.php',
        async: true,
        cache: false,
        dataType: "json",
        data: { action: 'insertone', data:datastring},
        success: function(data) {  
      
            if(data.status == true){
          
                jQuery('.antwort').css('display','block');
                jQuery('.antwort').html('Ihr Eintrag war erfolgreich!');
  
                setTimeout(function() {
                    parent.jQuery.fancybox.close();
                }, 1000);
              
            }else{
              
                alert('Fehler');
              
            }
          
        },
        error: function(req, status, error) {
        
            jQuery.fancybox(
  
                '<div id="n1">'+req.responseText+'</div><div id="n2"><br>Danke!</div>',
              
                {
                    maxWidth    : 250,
                    maxHeight   : 30,
                    autoSize    : false,
                    fitToView   : false,
                    helpers     : {
                        overlay : {
                            closeClick: false
                        } // verhindert das Schließen wenn CLICK Ausserhalb der fancybox
                    }
                  
                }
              
            );
         
            }
        });
        return true;
    }
      
});

Vielleicht gehe ich auch falsch an die Sache ran?!
 
Jetzt hast Du so viel Code gepostet, dass ich den Wald vor lauter Bäumen nicht mehr sehe. Aber so einigermaßen verstehe ich wohl, was Du da machst: Es gibt zwei Versionen deiner PHP-Seite abhängig vom URL-Parameter. Mit dem Ajax-Request führst Du wahrscheinlich das Speichern durch (habe leider fast keine Kenntnisse über Ajax). Wodurch wird denn das Speichern angetriggert? In dem letzten Javascript scheint es ja nicht vom Druck eines Buttons o. ä. abhängig zu sein, sondern wird sofort ausgeführt.
Am Anfang hatte ich dich so verstanden, dass Du, abhängig davon, ob gespeichert wurde oder nicht, unterschiedliche Aktionen auf der Elternseite ausführen willst. Ist das so richtig? Wenn ja, würde ich in der Elternseite zwei Funktionen definieren, Aktion ohne Speichern und Aktion mit Speichern. In beiden das Schließen der Fancybox veranlassen und die sonstigen Aktionen. Und im iFrame-JS jeweils an den richtigen Stellen aufrufen:
Code: 
jQuery(document).on('click', '#btn_close', function() {
    parent.closeFancyBox();
);
Code: 
        success: function(data) { 
    
            if(data.status == true){
        
                jQuery('.antwort').css('display','block');
                jQuery('.antwort').html('Ihr Eintrag war erfolgreich!');

                setTimeout(function() {
                    parent.closeFancyBoxAfterSave();
                }, 1000);
            
            }else{
Keine Ahnung, ob ich dein Problem richtig verstanden habe. Wenn nicht, musst Du mich korrigieren.
 
Zuletzt bearbeitet:
Hi danke Dir erstmal das du dich damit so auseinander setzt.
Ich habe das jetzt mal umgebaut, kann jetzt auch auf alles zugreifen, nur kann ich die Fancybox nicht von außen schließen.

Ich habe jetzt nur noch die warengruppen.js, in der ich per click auf btn_neu, erstmal aus der DB die nächste ID hole,
dann lade ich per ajax nur das reine Template zur Bearbeitung eines neuen Eintrages. Dann lade ich das in die Fancybox und weise dem ID Feld den geladenen Wert zu.
Jetzt kann ich speichern und es landet in der DB. Nur kann ich jetzt nicht auf den close_btn zugreifen. Ich habe ja einen eigenen close_btn erstellt. Verzweifelung!!!

wg.jpg

Javascript: 
jQuery(document).on('click', '#btn_neu', function() {
           
            jQuery(this).attr('disabled', 'disabled');
           
            //Lade nextid()
            var maxid = nextid();
               
            jQuery.ajax({ 
               
                type        : 'POST', 
                url            : 'inc/php/warengruppen_templates.php',
                async        : true,
                cache        : false,
                fitToView    : false,
                dataType    : "html",
                data        : { action: 'new' },
                success        : function(data) {

                    jQuery.fancybox({
   
                        width        :     400,
                        height        :     243,
                        maxWidth    :     400,
                        maxHeight   :     243,
                        padding      :     '0',
                        autoSize    :     false,
                        closeBtn    :     true,
                        openEffect  :     'none',
                        closeEffect :     'none',
                        type        :     'iframe',
                        helpers     :     {
                            overlay : {closeClick: false} // verhindert das Schließen wenn CLICK Ausserhalb der fancybox
                                        },
                        content        :     data,
                       
                           
                    });
                   
                     jQuery('#id').val(maxid);
                    jQuery('#name').focus();

               } 
 });

Javascript: 
jQuery(document).on('click', '#btn_close', function() {
       
        //Fancybox close!!!!
        parent.jQuery.fancybox.close();
 
});
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück