Question

我创建了一个通过ajax请求自动刷新的页面。在这个页面上有很多模态对话框。

我的问题是，第一次加载时间页面，一切都很完美。但是当它通过ajax刷新时，对话框会忽略autoOpen: false和modal: true。我不知道为什么？！： - （

我的开始JS代码：

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();
});

在ASP中加载页面期间，会创建对话框，如下所示：

$('#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;
});

创建的对话框数量取决于数据库输入，因此这是完全动态的。

所以：当计时器按要求刷新页面时，所有再次创建的对话框都会忽略autoOpen: false和modal: true ...... draggable，{{1} }，resizable和width仍然很完美。

怎么办？

Answer 1

请参阅jQuery对话文档here。

您可能尝试的一件事是使用$('#close1').dialog('destroy');将对话框恢复到预先初始化的状态。

也可能没有必要使用.live()，如果可能应该避免使用$('#close1Opener').click(function () {});。使用{{1}}是一种更清洁的方式。

jQuery UI对话在ajax刷新后表现得很奇怪

1 个答案: