Question

I’ve been working on a simple JQuery dialog form that loads in via AJAX. It uses JQuery Tools to validate, and if successful, submits via AJAX and closes. Here’s the code that opens the dialog via AJAX (via a nice little link):

<script type="text/javascript">
var activeDialog;
$(function (){
    $('a.ajax').click(function() {
        var dialogDiv = '<div style="display:hidden" id="dialogDiv" title="'+this.title+'"></div>';
        var dialog = $(dialogDiv).appendTo('body');
        // load remote content
        activeDialog = dialog.load(
            this.href, 
            {},
            function (responseText, textStatus, XMLHttpRequest) {
                dialog.dialog({
                    resizable: true,
                    title: this.title,
                    autoOpen: true,
                    height: 350,
                    width: 600,
                    modal: true,
                    close: function(event, ui) {
                        try {$("#addNoteForm").data("validator").destroy();}catch(e){}
                        $(this).dialog("destroy");
                    }
                });
            }
        );
        return false;
    });
});
</script>
<BR><BR>
<a class="ajax" href="dialog_clientEdit.php?cid=172" title="Add New Note">Create note</a>

As you can see, the dialog is loaded in from the page “dialog_clientEdit.php”. The dialog loads in with it’s own processing script, and once filled in and submitted successfully, send the data via AJAX and if there are no errors, closes itself and destroys the validator and the dialog:

<div id="dialogNote9356904" title="Add New Note">
    <form action="process_note.php" method="post" name="addNoteForm" id="addNoteForm" class="form has-validation">
    <fieldset style="border:none;">
        <div class="clearfix">
            <label for="form-note" class="form-label">Note <em>*</em></label>
            <div class="form-input form-textarea"><textarea id="form-note" rows="5" name="note" required="required" /></textarea></div>
        </div>
        <div class="clearfix">
            <label for="form-notedate" class="form-label">Date <em>*</em><small>mm/dd/yyyy</small></label>
            <div class="form-input"><input type="date" id="form-notedate" name="date" data-value="03/05/2004" format="mm/dd/yyyy" required="required" /></div>
        </div>
        <div class="clearfix">
            <label class="form-label">Visibility <em>*</em><small>Private not visible to client</small></label>
            <div class="form-input"><label for="form-visibility-private"><input type="radio" name="visibility" id="form-visibility-private" value="private" checked /> Private</label> <label for="form-visibility-public"><input type="radio" name="visibility" id="form-visibility-public" value="public" /> Public</label></div>
        </div>
        <div class="form-action clearfix">
        <button class="button" id="submitNote" type="button" data-icon-primary="ui-icon-circle-check">Create Note</button>
            <button class="button" type="button" onClick="activeDialog.dialog("close");">Cancel</button>
            <span id="addDialogLoader"></span>
        </div>
    </fieldset>
    </form>
</div>
<script>
$('#submitNote').click(function () { 
    var form = $('#addNoteForm');
    if(form.data("validator").checkValidity()){
        var formData = $(form).serialize();
        // Save form via AJAX
        var ajax_load = "<img src='../images/ajax-loader.gif' alt='Saving...' />";
        var loadUrl = "process_note.php?cid=172";
        $("#addDialogLoader").html(ajax_load).load(loadUrl, formData, function(response, status, xhr) {
            if (status != "error") {
                if(response == "1"){
                    activeDialog.dialog("close");
                } else { alert("There was an error saving this note: "+response); }
            } else {
                 alert("An error occurred while performing your request: " + xhr.status + " " + xhr.statusText);
            }
        });
    }
    return false;
});
</script>

The problem is this: the form only submits one time. You can fill it out, the validition works fine, and all the AJAX fires correctly and everyone is happy. Then, when you try a second time, the validator no longer works and clicking the Create Note button basically does nothing… the dialog never submits and the AJAX never fires.

I’m making sure to destroy the dialog and validator after it’s closed. The dialog re-opens fine, but the datepicker doesn’t work on the second opening, there’s no more validition and the form can’t submit.

Sorry that I’m including all of the code, but I really don’t know where the error is here. I’m sure it has something to do with the way I’m closing it (or re-opening it, or both). Can anyone help?

Answer 1

After MUCH testing, I found that every time the dialog was created and closed, the remaining form and it’s elements remained in the DOM. Subsequent calls to the dialog would fire on the old form which is why the datepicker, validation and submission stopped working.

To fix the issue, I just replaced this line on the Close event for the dialog function:

$(this).dialog("destroy");

…with this one:

$(this).dialog("destroy").remove();

This new line destroys the dialog and then removes the div that was holding the dialog from the DOM (in the case of the code above, referenced by the variable “dialogDiv”).

All problems solved!