Question

I have a table that, when any row is clicked, launches a jQueryUI modal dialog box to allow users to edit that record. I use the following script which seems to work, successfully loading the relevant record’s details in using AJAX:

$("#datatbl tr").bind('click', function() {        
        var url = 'item_edit.asp?id='+$(this).attr("data-myid");
        var dialog = $('<div style="display:hidden" title="Record details:"></div>').appendTo('body');
        // load remote content
        dialog.load(
            url, 
            {},
            function (responseText, textStatus, XMLHttpRequest) {
                dialog.dialog({         
                    height: 440,
                    width: 550,
                    autoOpen: false,
                    modal: true,
                    buttons: {
                        "Update this record": function() {
                         $('#editform').submit();
                            },
                        Cancel: function() {
                        $( this ).dialog( "close" );
                        }
                    }
        });
        dialog.dialog('open');
            }
        );
        //prevent the browser to follow the link
        return false;
});

It works ok the first time I click on a record, but if I click cancel and try to edit another record, the dialog box does appear (with the correct record details) however, no scripts within the dialog box work – eg: there’s a jqueryUI datepicker input and some validation.

There are no javascript errors and, from my limited understanding of FireBug, I can’t spot anything going wrong so I would appreciate some advice how to proceed, thanks!

EDIT: Argh! Sometimes, it takes something like typing it out here to spot the obvious. I just realised that the DIV created for the dialog box doesn’t get destroyed when the box closes. I’ve added a line to do this and it now works. Thanks for listening. 🙂

For future reference, I added an ID to the DIV created in ‘var dialog’ and removed it in the Cancel function:

Cancel: function() {
                        $( this ).dialog( "close" );
                        $('#dialogbox').remove();
                        }

I’d still appreciate if anybody suggests a better way to handle this behaviour.

Answer 1

I fixed it: the DIV created for the dialog box doesn’t get destroyed when the box closes.

I added an ID to the DIV created in ‘var dialog’ and removed the DIV in the Cancel function:

Cancel: function() {
                        $( this ).dialog( "close" );
                        $('#dialogbox').remove();
                        }