[jQuery] Foutmelding bij jQuery Ajax Form i.c.m. UI Dialogs

[DeepFreeze.NL]

Situatie
Ik ben momenteel een webapplicatie aan het ontwikkelen waarin ik gebruik maak van de volgende componenten (laatste versies):

• jQuery 1.5.1
• jQuery UI 1.8.11
• jQuery Form Plugin 2.67

In index.php (onderstaande html bron) maak ik gebruik van jQuery UI Tabs. Hiermee wordt middels AJAX content ingeladen welke in href vermeld staat. In de ingelade content staan links die een jQuery UI Dialog openen. In de footer (welke buiten de tabs staat) staan ook enkele links waarmee een jQuery UI Dialog wordt geopend. In die dialogs zit een form waarmee ik dan weer via de jQuery AJAX Form plugin de data naar post.php submit.

Index.php

HTML:

<div id="tabs">
<ul>
<li><a href="content/pagina1.php"><span>Pagina 1</span></a></li>
<li><a href="content/pagina2.php"><span>Pagina 2</span></a></li>
</ul>
</div>

<div id="footer"><a href="dialogs.php?dialog=contact" title="Contact">Contact</a> | <a href="dialogs.php?dialog=feedback" title="Feedback">Feedback</a></div>

</div>

JavaScript:

<script type="text/javascript">
$(document).ready(function() {
    
    // Loading animaties aanmaken
    var $preloader = '<img src="images/loading.gif" alt="Bezig met laden" class="loading" />';
    var $loading = '<div class="ui-state-highlight ui-corner-all"><p><img src="images/loading.gif" alt="Bezig met laden" style="float: left; margin-right:10px;" />Een ogenblik geduld a.u.b.</p></div>';
    
    // Tabs
    $("#tabs").tabs({
        show: function() { $(".ui-tabs-selected").removeClass("ui-tabs-selected"); }, // Tab weer selectable maken.
        spinner: '',
    });
        
    // Dialogs
    var $dialog = $('<div></div>')
        .dialog({
            resizable: false, modal: true, autoOpen: false, width: 600, position: ['',140],
            buttons: {
            "Verstuur": function() {
                $('#output').html($loading);
                setTimeout(function() { $('#form').submit(); }, 1000);
            },
            "Venster sluiten": function() { $(this).dialog('close'); }
        }
    });
    
    // Dialog openen
    $('#footer a').click(function() {
        $dialog.html($preloader).load($(this).attr('href')); // Loading weergeven en content van dialog laden.
        $dialog.dialog('option', 'title', $(this).attr('title')).dialog('open'); // Titel aanpassen en dialog openen.
        return false; // Voorkomen dat de link geopend wordt.
    });
});
</script>

Content/pagina1.php

HTML:

<h1>Pagina 1</h1>
<p><a href="dialogs.php?dialog=content_dialog" title="Titel van dialog" id="open_dialog_vanuit_tab_content">Link om dialog te openen</a></p>

JavaScript:

$(document).ready(function() {

    // Loading animatie aanmaken
    var $loading = '<div class="ui-state-highlight ui-corner-all"><p><img src="images/loading.gif" alt="Bezig met laden" style="float: left; margin-right:10px;" />Een ogenblik geduld a.u.b.</p></div>';
    
    // Dialog template aanmaken
    var $dialog = $('<div></div>')
        .dialog({
            resizable: false, modal: true, autoOpen: false, width: 600, position: ['',140],
            buttons: {
            "Verstuur": function() {
                $('#output').html($loading);
                setTimeout(function() { $('#form').submit(); }, 1000);
            },
            "Venster sluiten": function() { $(this).dialog('close'); }
        }
    });
    
    // Dialog openen
    $('#open_dialog_vanuit_tab_content').click(function() {
        $dialog.html('<img src="images/loading.gif" alt="Bezig met laden" class="loading" />').load($(this).attr('href')); // Loading weergeven en content van dialog laden.
        $dialog.dialog('option', 'title', $(this).attr('title')).dialog('open'); // Titel aanpassen en dialog openen.
        return false; // prevent the default action, e.g., following a link
    });
});

Dialogs.php

HTML:

<form id="form" action="post.php?&type=feedback" method="post">
<div id="output"></div>
<p>Dit is het feedbackformulier</p>
<h3>Uw feedback</h3>
<p><textarea name="feedback" cols="" rows="" class="tinymce"></textarea></p>
</form>

JavaScript:

$(document).ready(function() {
    
    $('textarea.tinymce').tinymce({ script_url : 'js/tiny_mce/tiny_mce.js',theme : "simple",language : "nl" });
    $('#form').bind('form-pre-serialize', function(e) { tinyMCE.triggerSave(); });
    $('#form').ajaxForm({ target: '#output' });
});

Wanneer ik eerst op de link "Feedback" druk, wordt er netjes een Dialog geopend, de content (het feedbackformulier) wordt goed ingeladen en wanneer ik op Submit druk krijg ik ook een goede response van post.php. Als ik vervolgens op de link van "Contact" druk om een dialog te openen met daarin het contactformulier, dan werkt dat ook allemaal goed.

Wanneer ik een Dialog wil openen vanuit jQuery UI Tabs geladen content werkt dat ook allemaal (inclusief de post en response). Als ik direct daarna op Contact of Feedback druk,opent de dialog, wordt de content netjes geladen, maar wanneer ik dan op Submit druk krijg ik in de Firebug console venster de onderstaande error en geen response meer van post.php.

Error
uncaught exception: [Exception... "Component returned failure code: 0x8000ffff (NS_ERROR_UNEXPECTED) [nsIDOMHTMLDocument.implementation]" nsresult: "0x8000ffff (NS_ERROR_UNEXPECTED)" location: "JS frame :: http://mijnsite.nl/ :: <TOP_LEVEL> :: line 0" data: no]
Line 0

Als de error eenmaal geweest is moet ik eerst een page refresh doen voordat een willekeurige dialog weer werkt.

Het probleem doet zich ook voor als ik eerst een dialog open vanuit de footer van index.php en daarna vanuit de in tabs geladen content. Ook doet het probleem zich voor wanneer ik tussen tabs wissel (dus 2x vanuit verschillende in tabs geladen content). Wanneer ik vanuit de in tabs geladen content 2x achter elkaar dezelfde dialog open gaat alles wel gewoon goed.

Ik ben nu al enkele dagen bezig om dit probleem op te lossen. Eerst liep ik tegen het probleem aan dat een dialog maar 1x geopend kan worden. Dat heb ik o.a. middels dit artikel en dit artikel deels kunnen verhelpen, maar ik blijf maar vastlopen op deze error .

Ik hoop dat iemand mij hier een beetje op weg kan helpen, want ik heb werkelijk echt van alles al geprobeerd en kom er maar niet uit!

Bedankt alvast!

[jw_moonshine]

Is het niet zo dat je met ajax ingelade content niet zomaar terug kan vinden in de dom? Zou het kunnen dat het daar ergens de mist in gaat?

[Rekcor]

Kun je anders een link geven naar je website? Ik wil graag helpen, maar vind het erg lastig om dit alleen op basis van code te doen.

Daarnaast kan het helpen om e.e.a. ook in Google Chrome (of zelfs: Internet Explorer te debuggen. Misschien dat die een duidelijkere foutmelding geeft?

[DeepFreeze.NL]

Rekcor schreef op donderdag 24 maart 2011 @ 08:33:
Kun je anders een link geven naar je website? Ik wil graag helpen, maar vind het erg lastig om dit alleen op basis van code te doen.

Zie hier een voorbeeld: http://bestaat_niet_meer

[ Voor 3% gewijzigd door DeepFreeze.NL op 16-04-2011 14:28 ]

[R4gnax]

DeepFreeze.NL schreef op donderdag 24 maart 2011 @ 13:48:
[...]


Zie hier een voorbeeld: http://site.stx.nl/temp/

Het is triviaal om met Firebug een stack trace te krijgen naar waar het fout gaat. Alleen zou het dan wel helpen als je de development versies van de javascripts eventjes neerzet. Het leest zo moeilijk met minified code.

Verder is je site op andere punten ook fundamenteel stuk: als ik eerst het contact formulier open en dat instuur en daarna de test dialog 1 open krijg ik bij het proberen te versturen de melding dat 'de wijze van contact' niet is ingevuld.

[ Voor 14% gewijzigd door R4gnax op 24-03-2011 19:38 ]