2010-12-15 8 views
2

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

が、これはAjaxのデータを更新しません(私はFirebugので送信された要求を見ているとそれだけで初期のparamsを含みます)。

ユーザーがタブをクリックすると、どのようにajaxデータを変更できますか?

おかげ

EDITED:あなたのコードが見える

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

:このコードは

答えて

3

の作品で、今私は何を探していることは、 "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

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 
} 

}); 
}); 
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個のタブのURLに配置する必要が元100個のタブのために必要がある場合。

+0

その後、連想配列のようなオブジェクトを使用して、代わりに一致を検索し、複数のif/then文を避けます。 – Blazemonger

関連する問題