Question

I have created a page which is autorefreshing via ajax requests. On this page there is a lot of modal dialog-boxes.

My problem is, that the first the time page is loaded, all works perfect. But when it is refreshed via ajax the dialog-boxes disregards autoOpen: false and modal: true. I have no idea why?! 🙁

My start JS code:

var intval;
var xmlhttp;
$('.ui-dialog').dialog({
    open: function(event, ui) {
        stopTimer();
    },
    close: function(event, ui) {
        startTimer();
    }
});

function startTimer() {
    intval = setInterval('ajaxRefresh()', 15000);
};

function stopTimer() {
    clearTimeout(intval);
    if (xmlhttp) xmlhttp.abort();
};

function isDialogOpen() {
    var value = false;
    $('.ui-dialog').each(function() {
        if ($(this).dialog('isOpen') == true) value = true;
    });
    return value;
};

function ajaxRefresh() {
    xmlhttp = $.ajax({
        url: 'site.asp',
        data: {
            tab: 'hi',
            p: 's',
            a: 'open',
            c: 'some',
            h: 'thing'
        },
        beforeSend: function() {
            stopTimer();
            $('#timerimg').attr('src', 'img/icons/loading.gif');
        },
        error: function(xhr, thrownError) {
            if (xhr.status !== 0) alert(xhr.status + ' - ' + thrownError);
        },
        success: function(result) {
            if (!isDialogOpen()) $('body').html(result);
        },
        complete: function() {
            $('#timerimg').attr('src', 'img/icons/stop.gif');
        }
    })
};

$(document).ready(function() {
    startTimer();
});

During loading of the page in ASP the dialogs are created and looks like this:

$('#close1').dialog({
    modal: true,
    draggable: false,
    resizable: false,
    autoOpen: false,
    width: 400,
    buttons: {
        'close': {
            text: 'Nej',
            click: function() {
                $(this).dialog('close');
            }
        },
        'submit': {
            text: 'Ja',
            click: function() {
                window.location = 'page.asp?p=s&a=open&c=some&h=thing&n=close&id=1'
            }
        }
    }
});
$('#close1Opener').live('click', function() {
    $('#close1').dialog('open');
    return false;
});

How many dialogs that are created depends on the database inputs, so this is completely dynamic.

So: When the page refreshed on request by the timer, all the dialogs that are created again disregards autoOpen: false and modal: true …… draggable, resizable, width and buttons works still perfect.

What to do?

Answer 1

See the jQuery Dialog documentation here.

One thing you might try is using $('#close1').dialog('destroy'); which brings the dialog back to it’s pre-initialized state.

Also using .live() probably isn’t necessary and should be avoided if possible. Using $('#close1Opener').click(function () {}); is a cleaner way.