jQuery: Dialoge, Ajax und document.ready

Chriz · 13.10.2011, 22:23

Hallo,

ich habe ein tricky Problem mit jQuery UI / Dialog und Formularen, die sich selbst ggf. bei fehlerhaften Eingaben selbst wieder in den Dialog laden. Das klappt genau 1x, danach funktionieren die im document.ready des Ajax-Requests stehenden submit-Handler nicht mehr und meine Formulare im Dialog lassen sich nicht mehr abschicken.

Schritt für Schritt:
Ich öffne per Klick einen Dialog, in den per Ajax Inhalt geladen wird:

Code:

     function dialogDestroyAll() {
        var dialogJ = $('.ui-dialog-content');
        dialogJ.dialog('destroy');
    }

    function loadTraveller(index) {
        dialogDestroyAll();
        $.getJSON(
            "\/reiseantrag-mitreisenden-hinzufuegen",
            { index: index },
            function(json) {
                var htmlJ = $('<div></div>').appendTo('body');
                htmlJ.html(json.html);
                htmlJ.dialog(JQUERY_UI_DIALOG_OPTIONS_DEFAULT);
                return false;
            }
        );
        return false;
    }

Zurückgegeben wird in JSON eingebettetes HTML in diesem Format:

Code:

{errno:0,html:"...."}

Nun wird das HTML also in einen Dialog gepackt.

Dank Zend_Form sieht das View-Template recht knapp aus:
($this->form = Zend_Form Instanz)

Code:

<div>
<?php echo $this->form; ?>

    <script type="text/javascript">
    // <![CDATA[

        //alert('ajax js');

        $(document).ready(function() {
            //alert('ajax document ready');
            //alert('ajax inline');
            console.log('Form found: ', $('#' + <?php echo json_encode($this->form->getId()); ?>));
            $('#' + <?php echo json_encode($this->form->getId()); ?>).bind('submit', function() {
                //alert('submitted');
                var formJ = $('#' + <?php echo json_encode($this->form->getId()); ?>);
                $.post(
                    formJ.attr('action'),
                    formJ.serialize(),
                    function(json) {
                        var dialogJ = $('.ui-dialog-content');
                        dialogJ.dialog('destroy');
                        if (json.errno == 0) {
                            sidebarRefresh();
                        } else {
                            var htmlJ = $('<div></div>').appendTo('body');
                            htmlJ.html(json.html);
                            htmlJ.dialog(JQUERY_UI_DIALOG_OPTIONS_DEFAULT);
                        }
                        return true;
                    },
                    'json'
                );
                return false;
            });
        });


    // ]]>
    </script>
</div>

Das Abschicken des Formulars im Dialog, klappt jetzt genau 1x, danach wird - bis zum vollständigen Pagereload - kein submit mehr akzeptiert, obwohl ich das Formular abschicke (geprüft mit onsubmit="alert(1)")! D.h. wenn das Formular korrekt ausgefüllt wurde (errno=0, das ist die wichtige Metaangabe), wird es wie erwartet geschlossen. Wobei mir schon unklar ist ob das Schließen korrekt gemacht ist, vermutlich nicht. Wenn das Formular nicht valide war, wird der Inhalt der JSON-Eigenschaft "html" als neuer Dialog angezeigt. Der Inhalt ist wieder exakt der, der oben gezeigt wird, mit dem Unterschied, das Zend_Form einige Fehlermeldungen anzeigt.

Kurze Info: Der submit-Button ist ein <input type="submit" />, es wird <form onsubmit="return false"> verwendet, das wird ja aber von $('#form_id').bind('submit', .. ) überschrieben (bzw. übersprungen). Die Form-ID ist immer vorhanden, immer korrekt!

Zwei konkrete Fragen, die ich trotz alert() Einbauten nicht abschließend klären konnte:
Wann wird ein per Ajax geladenes JavaScript ausgeführt? Sobald ich es ins DOM schieße, also bei htmlJ.html(json.html) - richtig? Dann exakt wird nämlich das oben ersichtliche document.ready() erneut aufgerufen (da das gleiche Formular ja wieder geladen wird, nur mit Fehlermeldungen diesmal), registriert den submit-Handler und DANN wird htmlJ.dialog() aufgerufen, hängt das DOM wieder um und der submit-Handler ist tot?!?!

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
decodeURIComponent auf Ajax Content (jQuery)	Atikos	JavaScript, Ajax und mehr	12	07.10.2011 15:00
jQuery UI Tabs komplett mit AJAX laden und letzt gewählten Tab wählen	K00S	JavaScript, Ajax und mehr	6	10.09.2011 13:54
Datagrid in Jquery easy ui mittels AJAX füllen in Zend	MLang	JavaScript, Ajax und mehr	0	03.09.2011 01:48
[Erledigt] Nutzen von document.ready() bei jquery	Igäl	JavaScript, Ajax und mehr	23	01.07.2011 21:53
JQuery Ajax Suche im Facebook Style	smilla	JavaScript, Ajax und mehr	7	17.03.2011 10:14
[Erledigt] jquery autocomplete mit ajax	PiXeL1337	JavaScript, Ajax und mehr	4	11.01.2011 12:23
jQuery (crossdomain) Ajax	halskrause	JavaScript, Ajax und mehr	10	01.09.2010 18:36
[Erledigt] jQuery - Per Ajax geladenes Javascript ausführen?	benAsks	JavaScript, Ajax und mehr	4	16.08.2010 23:39
jquery in AJAx aufruf + return	luks2com	JavaScript, Ajax und mehr	14	10.08.2010 10:34
[Erledigt] jquery ajax replaceWith	Thorus	JavaScript, Ajax und mehr	2	28.07.2010 09:35
Einstieg in Ajax (Jquery?) Empfehlung	omex	JavaScript, Ajax und mehr	3	28.05.2010 22:37
[Erledigt] Ajax, jQuery - CKEDITOR Fehler bei Instanzierung	jGeee	JavaScript, Ajax und mehr	3	26.03.2010 09:09
jQuery Ajax und $(this) Problem	halskrause	JavaScript, Ajax und mehr	8	01.03.2010 17:39
jQuery mit AJAX ohne ActiceX im IE?	krush	JavaScript, Ajax und mehr	2	11.08.2009 08:54
Drag & Drop via JQuery & Ajax --> Geht nicht :(	Plague	JavaScript, Ajax und mehr	2	23.10.2008 12:19

13.10.2011, 22:23
Chriz Moderator Registriert seit: 11.05.2008 Beiträge: 6.266	jQuery: Dialoge, Ajax und document.ready Hallo, ich habe ein tricky Problem mit jQuery UI / Dialog und Formularen, die sich selbst ggf. bei fehlerhaften Eingaben selbst wieder in den Dialog laden. Das klappt genau 1x, danach funktionieren die im document.ready des Ajax-Requests stehenden submit-Handler nicht mehr und meine Formulare im Dialog lassen sich nicht mehr abschicken. Schritt für Schritt: Ich öffne per Klick einen Dialog, in den per Ajax Inhalt geladen wird: Code: function dialogDestroyAll() { var dialogJ = $('.ui-dialog-content'); dialogJ.dialog('destroy'); } function loadTraveller(index) { dialogDestroyAll(); $.getJSON( "\/reiseantrag-mitreisenden-hinzufuegen", { index: index }, function(json) { var htmlJ = $('<div></div>').appendTo('body'); htmlJ.html(json.html); htmlJ.dialog(JQUERY_UI_DIALOG_OPTIONS_DEFAULT); return false; } ); return false; } Zurückgegeben wird in JSON eingebettetes HTML in diesem Format: Code: {errno:0,html:"...."} Nun wird das HTML also in einen Dialog gepackt. Dank Zend_Form sieht das View-Template recht knapp aus: ($this->form = Zend_Form Instanz) Code: <div> <?php echo $this->form; ?> <script type="text/javascript"> // <![CDATA[ //alert('ajax js'); $(document).ready(function() { //alert('ajax document ready'); //alert('ajax inline'); console.log('Form found: ', $('#' + <?php echo json_encode($this->form->getId()); ?>)); $('#' + <?php echo json_encode($this->form->getId()); ?>).bind('submit', function() { //alert('submitted'); var formJ = $('#' + <?php echo json_encode($this->form->getId()); ?>); $.post( formJ.attr('action'), formJ.serialize(), function(json) { var dialogJ = $('.ui-dialog-content'); dialogJ.dialog('destroy'); if (json.errno == 0) { sidebarRefresh(); } else { var htmlJ = $('<div></div>').appendTo('body'); htmlJ.html(json.html); htmlJ.dialog(JQUERY_UI_DIALOG_OPTIONS_DEFAULT); } return true; }, 'json' ); return false; }); }); // ]]> </script> </div> Das Abschicken des Formulars im Dialog, klappt jetzt genau 1x, danach wird - bis zum vollständigen Pagereload - kein submit mehr akzeptiert, obwohl ich das Formular abschicke (geprüft mit onsubmit="alert(1)")! D.h. wenn das Formular korrekt ausgefüllt wurde (errno=0, das ist die wichtige Metaangabe), wird es wie erwartet geschlossen. Wobei mir schon unklar ist ob das Schließen korrekt gemacht ist, vermutlich nicht. Wenn das Formular nicht valide war, wird der Inhalt der JSON-Eigenschaft "html" als neuer Dialog angezeigt. Der Inhalt ist wieder exakt der, der oben gezeigt wird, mit dem Unterschied, das Zend_Form einige Fehlermeldungen anzeigt. Kurze Info: Der submit-Button ist ein <input type="submit" />, es wird <form onsubmit="return false"> verwendet, das wird ja aber von $('#form_id').bind('submit', .. ) überschrieben (bzw. übersprungen). Die Form-ID ist immer vorhanden, immer korrekt! Zwei konkrete Fragen, die ich trotz alert() Einbauten nicht abschließend klären konnte: Wann wird ein per Ajax geladenes JavaScript ausgeführt? Sobald ich es ins DOM schieße, also bei htmlJ.html(json.html) - richtig? Dann exakt wird nämlich das oben ersichtliche document.ready() erneut aufgerufen (da das gleiche Formular ja wieder geladen wird, nur mit Fehlermeldungen diesmal), registriert den submit-Handler und DANN wird htmlJ.dialog() aufgerufen, hängt das DOM wieder um und der submit-Handler ist tot?!?! __________________ "Nuschel ich?" - "Was?"


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten