Question

My problem is that all JavaScript that I apply to an ajax-loaded JqueryUI Dialog doesn’t work when I close the dialog and then open another one up.

The few things that I have noticed is that when I close it, the html just becomes hidden, it isn’t actually deleted. Calling $dialog.dialog(“destroy”); doesn’t help. Deleting the hidden html doesn’t either. I’m not sure how to destroy the validation object (docs don’t say anything about it), or if doing that on dialog close will even help. I essentially just want to get back to the initial page load phrase when I close the dialog, so opening another one will recreate the validation object and such.

I had this problem with other widgets like TinyMCE, which would not initialize again once I close the first dialog and open others.

Here’s a simplified version of my code for one such dialog-

var create_contact_dialog = function () {
    var $contactDialog = $('<div></div>')
    .dialog({
        autoOpen: false,
        dialogClass: "contact_form_dialog",
    });
    $contactDialog.dialog('open');
    return $contactDialog;
};

$('#open_contact_form').live('click', function () {
    var $contactDialog = create_contact_dialog();
    $contactDialog.load('/contact_form', function () {
        contact_form_validator = $("#contact_form").validate({
            rules: {
                name: {
                    required: true
                },
            }
        });
    });
});

Any pointers are appreciated!

Answer 1

You will need to remove the DOM for the dialog once it has been closed, since the form that you load each time has the same exact ID (which is causing subsequent loads to still reference the first DOM with that ID). You can do this by providing a close function callback that deletes the contents of the dialog:

var create_contact_dialog = function () {
    var $contactDialog = $('<div></div>')
    .dialog({
        autoOpen: false,
        dialogClass: "contact_form_dialog",
        close: function() {
            $contactDialog.remove();
        }
    });
    $contactDialog.dialog('open');
    return $contactDialog;
};

I provided an example of it here, if you remove the close function you will see that the alert does not work.

jsfiddle example