Question

I have a jQuery dialog that appears and loads an external page. In that page i am running a setInterval() function that queries my server continuously every 1 second (AJAX). The problem is that when i close the dialog, the setInterval doesn’t stop running.

here is the code for the dialog:

var theUrl = 'someUrl';

var popUp = document.createElement('div');

$(popUp).dialog({
        width: 400,
        height: 270,
        title: "Some Title",
        autoOpen: true,
        resizable:false,
        close: function(ev, ui) {
                    $(this).dialog('destroy');
               },
        modal: true,
        open: function() { 
                    $(this).load(theUrl);
              }
});    

I tried calling $(this).dialog('destroy') and $(this).remove() and document.body.removeChild(popUp) on close. nothing worked. is there anyway to ‘unload’ the loaded page?

Answer 1

setInterval returns a handler that you can pass to clearInterval to stop the function from running. Here’s a basic example of how it works.

var handler = setInterval(function() {}, 2000);
clearInterval(handler);

For your example you’d want to call clearInterval in the close method of the ui.dialog.

Docs:

setInterval – https://developer.mozilla.org/en/window.setInterval

clearInterval – https://developer.mozilla.org/en/DOM/window.clearInterval

Edit

You will not be able to call clearInterval without the stored handler from setInterval, therefore if the call to setInterval is in another script the only way you’re going to capture the handler is to override window.setInterval itself.

$(function() {
    var originalSetInterval = window.setInterval;
    var handlers = [];

    window.setInterval = function() {
        handlers.push(arguments[0]);
        originalSetInterval(arguments);
    };

    $('whatever').dialog({
        close: function() {
            for (var i = 0; i < handlers.length; i++) {
                clearInterval(handlers[i]);
            }
            handlers = [];
        }
    });
});

Note that the code to override window.setInterval must come before including the <script> tag to bring in the external file. Also this approach will clear all interval functions whenever clearInterval is called, therefore this is not ideal, but it’s the only way you’re going to accomplish this.