jQuery UI对话框在Ajax刷新后表现怪异

我创建了一个页面，它通过ajax请求进行自动刷新。在这个页面上有很多模态对话框。jQuery UI对话框在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作品仍然完美。

怎么办？

来源

2012-01-27 Behrens

我们可能会有答案，但读取缩小的代码对任何人都是困难的... – 2012-01-27 13:20:27

我感谢您的编辑！ :) – Behrens 2012-01-27 13:49:25

你使用哪个jquery和jquery-ui版本？ – JSuar 2012-01-30 13:33:28

请参阅jQuery对话框文档here。

你可能会尝试的一件事是使用$('#close1').dialog('destroy');，使对话回到它的预初始化状态。

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

来源

2012-02-01 17:35:55 sinemetu1

毁坏对话框工作:)感谢队友！ :) – Behrens 2012-02-02 09:38:42

jQuery UI对话框在Ajax刷新后表现怪异

回答

相关问题