jQuery UI選項卡：從單個文件/頁面加載選項卡而不使用Ajax或iframe

您好我正在使用jQuery UI選項卡作爲窗體。jQuery UI選項卡：從單個文件/頁面加載選項卡而不使用Ajax或iframe

因此，我無法使用Ajax，因爲發送表單時必須存在所有標籤/內容。該表格由9個不同的選項卡組成，每個選項卡都有很多代碼。

現在我想將這些選項卡的內容外包給每個單獨的文件（tab1.php，tab2.php，...）。

我到目前爲止的解決方案：

我可能包括在<head>的所有文件（tab1.php，...），比裝載每個內容作爲變量。我不喜歡這樣，因爲所有的轉義代碼看起來很亂。

我使用iframe。點擊時只能加載框架。

<div id="tab-1"> 
    <iframe src="..."></iframe> 
</div>

有沒有更好的方法嗎？也許使用Ajax load-onceAll或類似的東西？...也許是防止iframe重新加載......我不知道。

來源

2011-04-28 Email

我不明白這個要求：*我不能使用ajax，因爲發送表單*時所有的標籤/內容都必須存在。你能詳細說明爲什麼你認爲發送表單會阻止你使用ajax嗎？此外，一些小例子的代碼可能有助於更好地說明你在做什麼。 – Cheeso 2011-04-28 18:56:48

嗨。如果有人發送表單，所有標籤都必須呈現/加載，因爲表單取決於所有標籤。該表單還有一些相互作用（在第一個選項卡中選擇一個複選框 - >在第二個選項卡中交替一些值，等等......）。 – Email 2011-04-28 19:03:43

您可以外包的代碼單獨的文件然後拉在自己的內容與阿賈克斯jQuery的呼叫時，頁面加載：

var tabs = [ 
    { 
     url: 'tab1.php', 
     $ctrl: $('div#tab1') 
    }, 
    { 
     url: 'tabN.php', 
     $ctrl: $('div#tabN') 
    } 
]; 

for(var i = 0; i < tabs.length; ++i) 
{ 
    var data = $.ajax({ 
    url: tabs[i].url, 
    async: false 
    }).responseText; 
    tabs[i].$ctrl.html(data); 
}

然後你可以使用一些驗證中的各個選項卡形式onSubmit功能，以確保直到全部完成後纔會將其回傳。這只是一個可能的解決方案。

來源

2011-04-28 19:01:32 Chad

您是否已經嘗試使用jQuery添加選項卡dynamicaly的內容？我的意思是你用一個div白衣ID "tab1_div"然後添加使用

$("#tab1_div").html("my html content for the tab-page");

如果這樣的作品，你可以使用$.get(...)阿賈克斯選項卡中的HTML代碼的HTML。

來源

2011-04-28 19:01:51

jQuery UI選項卡：從單個文件/頁面加載選項卡而不使用Ajax或iframe

回答

相關問題