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刷新後表現怪異

回答

相關問題