Диалоги пользовательского интерфейса jQuery, ведущие себя странно после обновления ajax - PullRequest
Новая
       12

Диалоги пользовательского интерфейса jQuery, ведущие себя странно после обновления ajax

1 голос
/ 27 января 2012

Я создал страницу, которая автоматически обновляется с помощью запросов 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, resizable, width и buttons работает по-прежнему идеально.

Что делать?

1 Ответ

1 голос
/ 01 февраля 2012

См. Документацию jQuery Dialog здесь .

Одна из вещей, которую вы можете попробовать, - это использовать $('#close1').dialog('destroy');, который возвращает диалог в предварительно инициализированное состояние.Также использование .live(), вероятно, не является необходимым, и его следует избегать, если это возможно.Использование $('#close1Opener').click(function () {}); - более чистый способ.

...