2010-04-28 106 views
0

這可能是一個奇怪的問題,但我不知道最好的方式去關於它..jquery選項卡和表格

我正在使用jQuery ajax選項卡。選項卡部分是動態的,因此可以添加多個選項卡,因爲內容通過Ajax加載,相同的內容可以加載到不同的選項卡中。其他重要的細節是我使用緩存選項,因此選項卡保持狀態。

現在加載多個選項卡時會出現問題。它看起來像HTML和HTML等項目現在在DOM中有重複的ID,所以Ajax查詢不能再區分這些元素。結果是任何JavaScript/Ajax都會中斷。

有沒有人有任何建議來解決這個問題?

在此先感謝..

回答

0

當AJAX調用時返回,你可以得到的HTML和修改的新標籤內容的ID是你加載到卡口前。這將讓你有這樣的ID:

tab1input1

tab1input2

tab2input1

tab2input2

編輯

在演示上Jquerys網站http://jqueryui.com/demos/tabs/#ajax源代碼此處顯示以下

<script type="text/javascript"> 
    $(function() { 
     $("#tabs").tabs({ 
     ajaxOptions: { 
     error: function(xhr, status, index, anchor) { 
     $(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible. If this wouldn't be a demo."); 
     } 
     } 
     }); 
    }); 
    </script> 

您應該注意,您可以使用選項卡控件設置特定的ajax選項。參考jquery文檔中有關$ .ajax的文檔。另一個選項是成功,它允許你在ajax調用成功後運行一個函數。

使用成功選項,你可以

success: function (data) { 
    $("input", data).each(function() { 
    $(this).id(yourtabid + this.id); 
    $(this).name(yourtabid + this.name); 
    }); 
} 

應該採取的Ajax調用返回HTML和修改輸入ID和名稱在HTML和tabid追加到新的數據。

+0

你能指點我如何做到這一點? – Lee 2010-04-28 21:36:22

+0

看看我編輯的答案......這應該有所幫助,但你真的需要更多地研究AJAX上的jQuery文檔。有許多非常有用的ajax選項 – 2010-04-28 22:00:53