帶有AJAX選項卡的jQuery UI對話框問題

我遇到了使用jQuery工具選項卡（AJAX）和jQuery UI對話框（手動爲對話框執行AJAX加載）的問題。問題在於對話框被加載並專門爲當前選項卡設置（通過AJAX加載選項卡請求以及選項卡的內容）。 jQuery UI在創建對話框時，將容器從原始位置移除，添加標記並將其附加到主體。帶有AJAX選項卡的jQuery UI對話框問題

問題在於對話框現在超出了選項卡的內容，並且在隨後的選項卡更改中不會被替換/刪除。如果用戶單擊另一個選項卡或後退按鈕（這些選項卡具有使用URL哈希的AJAX歷史記錄，因此該頁面實際上沒有重新加載），但由於jQuery UI對話框將其移出標籤內容。它現在只出現在身體的底部。如果用戶在物理上點擊了關閉按鈕，我寫了一個'hack around'，但是如果按下後退按鈕或者另一個標籤通過AJAX加載並且jQuery UI實際上將其移回到身體（不知道如何/爲什麼這樣做！）。有什麼建議麼？如果我對此不清楚，請讓我知道。謝謝！（這是我現在得到，成功地消除它，當用戶物理上關閉對話框）

$('.openMyDialog').click(function() { 

        // Create div for dialog 
     $('body').append('<div id="modalContainer"></div>'); 

     // Load dialog with AJAX 
     $('#modalContainer').load('loadMyAjaxContent.html').dialog({ 
      modal: true, 
      width: 850, 
      open: function(type,data) { 
       // Remove from bottom of body and put it back into the tab's content 
       $(this).parent().appendTo('.panes div:first'); 
      }, 
      close: function() { 
       $(this).dialog('destroy'); 
       $('#modalContainer').remove(); 
      } 
     }); 


    });

來源

2010-01-22 Ryan

假設有一束jQuery的Ajax選項卡，每個選項卡Ajax的負載一個主要頁面的設置頁面進入頁面內容面板/ div。

page.html中

----/home\---/users\--- 
|<div id="page-content">| 
| page content gets | 
| loaded in here  | 
|</div>     |

在那得到由標籤ajax'd頁面，把這個頂部：

即。在users.html

$(document).ready(function() 
{ 
    $('.delete-user-form').each(function(){ 
     if($('.delete-user-form').length > 1) 
      $(this).detach(); 
    }); 

    $('#delete-user').dialog({ 
     autoOpen: false, 
     height: 200, 
     width: 300, 
     modal: true, 
     buttons: { 
      Cancel: function() { 
       $(this).dialog('close'); 
      }, 
      'Save': function() { 
       $('#delete-user-form').submit(); 
       $(this).dialog('close'); 
      } 
     } 
    }); 

    $('#delete-user-button').click(function(){ 
     $('#delete-user').dialog('open'); 
    }); 
});

而這在users.html準備的形式，將變成對話框：

<div id="delete-user" class="delete-user-form" title="Delete User" style="display:none;"> 
    <form action="/admin/users/delete" id="delete-user-form" method="POST"> 
     <input type="hidden" id="user-id" name="userID" /> 
     <table cellspacing="0" cellpadding="5px" border="0" id="delete-user-form-table" style="display:none;"> 
      <tr> 
       <td> 
        Do you really want to delete: 
       </td> 
       <td> 
        <input type="text" id="user-name" /> 
       </td> 
      </tr> 
     </table> 
    </form> 
</div>

現在作爲OP介紹，每次標籤之間的用戶切換和回到這個頁面，模式對話框div（id =「delete-user」）被複制。

JavaScript的第一個位遍歷所有重複的對話框，並從DOM中刪除除最後一個以外的所有對象，所以您最終只會根據需要選擇一個。

在頁面上放置一個按鈕/鏈接/ etc，並按照最高位指定的ID打開對話框。

即。 <input type="button" id="delete-user-button" value="Delete User" />

以這種方式打開對話框可防止OP在省略時發現的重複：autoOpen：false，從對話框設置選項中直接調用對話框。

來源

2010-10-06 02:45:17

帶有AJAX選項卡的jQuery UI對話框問題

回答

相關問題