javascript - Jquery 选项卡 : change ajax data on tab click

标签 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>

我将表单序列化到一个数组中,并将该数组连接到包含静态数据的数组。

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 数据?

谢谢

已编辑:现在使用此代码可以工作

最佳答案

我认为您正在寻找的是“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;
        }
    });
});

关于javascript - Jquery 选项卡 : change ajax data on tab click,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4448143/

相关文章:

javascript - 如何使用名称和值(数字 ID)填充下拉列表?

javascript - 从 ASP.NET 应用程序中的 javascript 获取数据

jquery - 突出显示所选页码的有效方法是什么?

jquery - execCommand 之后将焦点返回到 contenteditable?

jquery - 使用 jQuery 选择器选择一个元素,无论 ID 是什么

javascript - 我需要在以下 JavaScript 代码中导出辅助函数吗?

javascript - 如何计算文本区域中的行数

jquery - 下载 jQuery 脚本来本地化日期选择器

jquery-ui - JQuery UI Sortable : how to make a small area draggable, 不是整个可排序元素?

javascript - jquery ui resizable left-bottom handle to resize