Jquery选项卡：在选项卡单击时更改ajax数据答案

【问题标题】：Jquery tabs: change ajax data on tab clickJquery选项卡：在选项卡单击时更改ajax数据
【发布时间】：2010-12-15 08:44:56
【问题描述】：

我使用 jquery 选项卡通过 ajax 加载数据，但是当用户单击选项卡时，我需要向 url 添加一些参数。我事先不知道参数，因为它们来自用户填写的表格。所以我尝试了类似下面的代码，但我没有得到它的工作：

<div id="tabs">
    <ul>
        <li><a href="${tab1_url}">Tab 1</a></li>
        <li><a href="${tab2_url}">Tab 2</a></li>
        <li><a href="${tab3_url}">Tab 3</a></li>
    </ul>
</div>

然后我将表单序列化为一个数组并将该数组连接到包含 satic 数据的数组。

var staticData = [{name:'id',value:'${myId}'}];
$("#tabs").tabs({
    var $tabs = $("#tabs").tabs({
        ajaxOptions: { data: staticData},
        select: function(event, ui) {
            var dynamicData = $("#common_form").serializeArray();
            var dataToSend = staticData.concat(dynamicData);
            $("#tabs").tabs("option", "ajaxOptions", { 'data': dataToSend });
             return true;
        }
    });
});

但这不会在创建选项卡后更新 ajax 数据（我看到使用 Firebug 发送的请求，它只包含初始参数）。

当用户点击选项卡时如何更改 ajax 数据？

谢谢

已编辑：现在可以使用此代码

【问题讨论】：

标签： javascript jquery jquery-ui jquery-ui-tabs

【解决方案1】：

我认为您正在寻找的是“url”方法：

http://jqueryui.com/demos/tabs/#method-url

你的代码看起来像这样：

$(function(){
    $("#tabs").tabs({
        select: function(event, ui) {
           var data = $("#common_form").serialize();               
           if(ui.index == 1){
              var url = '${tab2_url}' + "&" + data;
              $("#tabs").tabs("url", 1, url); //this is new !
           }
           return true;
        }
    });
});

【讨论】：

现在可以正常使用了。关键是使用 $().tab() 来设置值。尽管我使用了一些不同的方法来做到这一点，但我认为您的解决方案有效。谢谢。

【解决方案2】：

jQuery(document).ready(function($){
$("a[name=tab]").click(function(e){
if($(this).attr('id')=="tab1")
{
//pass url1
}
if($(this).attr('id')=="tab2")
{
//pass url2
}
if($(this).attr('id')=="tab3")
{
//pass url3
}

});
});

这对我有用，但如果我需要前 100 个标签，我需要输入所有 100 个标签的网址。

【讨论】：

然后使用关联数组之类的对象来查找匹配项，并避免使用多个 if/then 语句。

【解决方案3】：

<div id="tabs">
    <ul>
        <li><a href="" name="tab" id="tab1">Tab 1</a></li>
        <li><a href="" name="tab" id="tab2">Tab 2</a></li>
        <li><a href="" name="tab" id="tab3">Tab 3</a></li>
    </ul>
</div>

jQuery 代码...

jQuery(document).ready(function($){
$("a[name=tab]").click(function(e){
if($(this).attr('id')=="tab1")
{
//pass url1
}
if($(this).attr('id')=="tab2")
{
//pass url2
}
if($(this).attr('id')=="tab3")
{
//pass url3
}

});
});

【讨论】：