Jquery选项卡:更改选项卡上的ajax数据点击

问题描述:

我已经使用jquery选项卡用ajax加载数据,但是当用户在选项卡中单击时,我需要为url添加一些参数。我事先不知道这些参数,因为它们来自用户填写的表单。所以,我已经试过类似下面的代码,但我不明白它的工作:Jquery选项卡:更改选项卡上的ajax数据点击

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

,但在创建标签后,这个不更新阿贾克斯数据(我看到使用Firebug发送的请求,而且只包括初始PARAMS)。

如何在用户点击选项卡时更改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; 
     } 
    }); 
}); 
+0

现在工作正常。关键是使用$().tab()来设置值。虽然我用一种不同的方式来做到这一点,但我认为你的解决方案是可行的。谢谢。 – Javi 2010-12-15 10:05:19

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

}); 
}); 

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个标签的URL。

+0

然后使用类似于关联数组的对象来查找匹配,并避免多个if/then语句。 – Blazemonger 2012-11-26 22:32:34