Jquery选项卡:更改选项卡单击时的ajax数据

时间:2010-12-15 08:44:56

标签: javascript jquery jquery-ui jquery-ui-tabs

我已经使用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数据?

由于

已编辑:现在使用此代码

3 个答案:

答案 0 :(得分:3)

我认为您正在寻找的是“网址”方法:

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;
        }
    });
});

答案 1 :(得分:1)

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个标签页面。

答案 2 :(得分:0)

<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
}

});
});