如何在表单提交中重新加载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选项卡？

回答

相关问题