Variables doesnt refresh after AJAX request completed

Question

I have a grid of the \'objects\' in the page. For example:

obj1, obj2, obj3, ...

Every object has an option \'Edit\', which opens the modal window (ui.dialog) an

Answer 1

I think the problem is that you're recreating the dialog, but you're not destroying the old one. It's probably getting the values from the first one you create. Try adding a close callback to the modal.dialog() function which removes the div like so:

modal.dialog({
    modal: true,
    width: 300,
    height: 300,
    autoOpen: true
    close: function() { modal.remove(); } //$(this).remove(); Might also work.
});

This should remove your original div so that next time the modal dialog is opened the IDs within it are still unique.

You can verify that this is happening by using your browser's tools and checking to see what the DOM looks like after the second one is run.

Edit
You're other option is to save the dialog in a global variable, and then check if it has been defined yet. If it hasn't do what you're doing. If it has, set a variable to tell it what the ID is of the item you're editing and reset all the text boxes to blank before running .dialog("open"); again.