Unloading/deleting or reusing already loaded javascript

Question

I'm trying to load a jsp-file into a jQuery UI dialog http://jqueryui.com/demos/dialog/. The jsp contains a fullCalendar http://arshaw.com/fullcalendar/ calendar. The console calls for calLoader.jsp which more or less only contains:

<jsp:include page="../cal.jsp"/>

When I open the dialog the first time, everything works just fine, but after I close the dialog and try to open it again, I get the following stacktrace from Chrome:

Uncaught RangeError: Maximum call stack size exceeded
d.d.extend._Deferred.f.resolveWith
d.d.extend._Deferred.f.done
d.d.fn.d.ready
d.d.fn.d.init
d.d
(anonymous function)
d.d.extend.globalEval
ba
d.d.extend.each
d.fn.extend.domManip
d.fn.extend.append
d.fn.extend.html
d.fn.extend.load.d.ajax.complete
d.d.extend._Deferred.f.resolveWith
v
d.support.ajax.d.ajaxTransport.send.c

The problem is the same in firefox but I get the message:

too much recursion
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 

I realize that I'm trying to load the same stuff more than one and that it somehow needs to be either reused or unloaded/removed and reloaded, but I have no clue how to do that.

This is the code I use to open the calendar (was requested).

function openCalendar() {
    var dialog = jQuery('<div id="calendaropener"></div>')
    .dialog({
        autoOpen: false,
        draggable: true,
        modal: false,
        resizable: false,
        width: 820,
        height: 750,
        position: [50, 50],
        title: 'Kalender',
        close: function(ev, ui) { calendarObj = null; }
    });
    dialog.load("calLoader.jsp");
    dialog.dialog('open');
}

The function openCalendar() is called from a button on my page. Thanks!

Answer 1

My guess would be that after you close the first one it's only hidden and then you create another element with the same id, that causes a problem with the loading process. Ideally, to exercise a bit more control over the DOM I would start with having my calendar opener div in the main page, then creating the dialog as such:

$("#calendaropener").dialog(...

This may help you to manage / debug it a little more easily.

If you don't want to do that then you might try adding to your close function:

close: function(ev, ui) { calendarObj = null; $(this).remove(); }

This will ensure the element is removed from the DOM so you're not going to get any quirky issues that could follow from adding the element more than once.

Finally if you did just want to handle hiding and re-opening (assuming this doesn't break your logic) then you could trigger the dialog.load("calLoader.jsp"); conditionally, e.g.:

if($(dialogSelector).html().length == 0) {
    dialog.load("calLoader.jsp");
}

Hope something there helps!