Question

I’m working on a system using jQuery UI that opens a dialog which basically loads a continually refreshing tail of a log file. It works great, but the problem is that when you close it, it doesn’t kill off the dialog, so it still continues to send traffic to you with the tail of the file. Obviously it is not a good practice.

Anyway, the code I have so far to try and tackle the problem is as follows.

var $console = $('<div title="&nbsp; Server Console"></div>')
    .dialog({
         height: 720,
         width: 1000,
         resizable: false,
         autoOpen: false
    });

$(".consoleOpen").click(function(){
    $console.dialog('open').load("console.php?console="+this.name);
});

$console.bind('dialogclose', function(event) {
    $console.remove();
});

This is the refresh function in console.php:

(function($)
{
    $(document).ready(function()
    {
        var $container = $("#responsecontainer");
        $container.load("console_class.php?console=<?php echo $console; ?>");
        var refreshId = setInterval(function()
        {
            $container.load('console_class.php?console=<?php echo $console; ?>');
        }, <?php echo $consoleRefresh;?>);
    });
})(jQuery);

Answer 1

Look at the API function destroy()

$console.bind('dialogclose', function(event) {
    $console.dialog('destroy').remove();
});

You also need to use clearInterval or else it will keep running as long as the page is open.

$console.bind('dialogclose', function(event) {
    $console.dialog('destroy').remove();
    clearInterval(refreshID);
});