如何在表單提交中重新加載jquery選項卡？

使用jQuery的Ajax選項卡，而不是jQuery UI的是大我的需要下面這段代碼是我的Ajax選項卡，它加載與外部文件所選標籤如何在表單提交中重新加載jquery選項卡？

我也有一個爲使用AJAX發佈數據到這個頁面HOMEfriendstatus.inc.php這是#tab2

我想知道當我提交表單時，無論用戶在屏幕上加載了什麼標籤，我可以重新加載或更改爲＃ tab2顯示＃tab2的更新內容？

<script type="text/javascript"> 
var pageUrl = new Array();   
pageUrl[1] = "HOMEbulletin.inc.php"; 
pageUrl[2] = "HOMEfriendstatus.inc.php"; 
pageUrl[3] = "HOMEbulletin.inc.php"; 



function loadTab(id){ 
    if (pageUrl[id].length > 0){ 
     $("#loading").show(); 
     $.ajax({url: pageUrl[id], cache: false, success: function(message) {        
      $("#tabcontent").empty().append(message); 
      $("#loading").hide();    
     } 
    });     
} 
} 

$(document).ready(function(){ 
    /*$("#tab1").addClass('selected');*/ 
    $("#loading").hide(); 
    $("#tab1").click(function(){ 
     loadTab(1); 
     $('div.HOMEtabdiv ul.HOMEtabs a').removeClass('selected'); 
     $(this).addClass('selected'); 
    }); 

    $("#tab2").click(function(){ 
     loadTab(2); 
     $('div.HOMEtabdiv ul.HOMEtabs a').removeClass('selected'); 
     $(this).addClass('selected'); 
    }); 

    $("#tab3").click(function(){ 
     loadTab(3); 
     $('div.HOMEtabdiv ul.HOMEtabs a').removeClass('selected'); 
     $(this).addClass('selected'); 
    }); 
    }); 
</script>

來源

2009-07-26 JasonDavis

你確實意識到你正在寫的所有這些額外的垃圾，你正在快速接近JQueryUI的大小。只有它的核心和標籤JQueryUI是：184.23 kb未壓縮和〜122.7 kb縮小。考慮到谷歌甚至比你的服務器更好，更快，更容易地託管你的服務器幾乎太好了，以至於無法實現。不要使用這個，坦率地說，是愚蠢的。 – Sneakyness 2009-07-26 16:24:07

由於Google託管它的事實，如果您的任何訪問者已經訪問過一個也使用Google託管版本的網站，它只會使用它已下載的副本。這意味着使用從用戶計算機加載的0個帶寬。你不能比這更好。 – Sneakyness 2009-07-26 16:26:49

您是否試過在表單成功回調中運行loadTab(2)？這應該夠了。

你還沒有向我們展示你的代碼，通過AJAX發送的形式，但我想類似的東西應該工作：

$.post('http://example.com/ajax/form', $('form').serialize(), 
    function (data, textStatus) { 
     loadTab(2); 
     $('div.HOMEtabdiv ul.HOMEtabs a').removeClass('selected'); 
     $('#tab2').addClass('selected'); 
    } 
);

注意，這個複製的代碼$("#tab2").click()功能，所以你應該考慮使用命名的功能而不是匿名在這種情況下，並重新使用它在ajax回調：

function loadSecondTab() { 
    loadTab(2); 
    $('div.HOMEtabdiv ul.HOMEtabs a').removeClass('selected'); 
    $('#tab2').addClass('selected'); 
} 

$('#tab2').click(loadSecondTab); 
$.post('http://example.com/ajax/form', $('form').serialize(), loadSecondTab);

PS。 jQuery UI不算太大。你不必全部使用它。您可以輕鬆加載標籤模塊。

來源

2009-07-26 16:14:12 RaYell

如何在表單提交中重新加載jquery選項卡？

回答

相關問題