[英]Jquery tabs: change ajax data on tab click
我已经使用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数据?
谢谢
编辑:现在此代码有效
我认为您正在寻找的是“ 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;
}
});
});
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个标签的网址。
<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
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.