jQuery dialog with load doesnt clean up after itself

Question

I'm pretty sure this was somewhere discussed, but I cant seem to find it anywhere. I would really appreciate if anyone could point me to the right direction.

I have setup a dialog which opens and closes just fine. I need to load dynamic content in it and so Im using this:

$('#dialog').load("somepage.php?document=1");

This load up correctly and everything works pretty much fine except the fact that once I close the dialog and then open it with some different query string (e.g. with document=2) I can see that there are still contents of document=1 loaded in DOM.

This causes issue when there is javascript function in the Loaded page because than it gets executed twice. (well the number of times I load documents so its pretty much unusable).

I have tried clearing the dialog:

$('#dialog').html("") 

But that didnt help much.

Does anyone have any idea what could help?

Answer 1

Instead of just closing the dialog, destroy it:

$('#dialog').dialog("destroy");

That should clear the dialog back to its initial state:

https://api.jqueryui.com/dialog/#method-destroy

Answer 2

If you want to just load part of a page, you can always do the following: Let's say I want a specific div only.

$('#dialog').load("somepage.php?document=1 #myDiv");

Furthermore, I don't know what you're closing your #dialog with, but if it was something with an id of myButton, you'd do:

$(document).on("click", "#myButton", function(e) {
    // To keep div within DOM and empty
    $("#dialog").empty();
    // To get rid of div (you would have to re-append #dialog every time)
    $("#dialog").remove();
});

All this being said, .load() doesn't actually execute any scripts from your loaded page. If you were to use $.post() or $.get(), you could strip out the <script> tags yourself.

Best of luck!