パラメータを指定してJqueryタブを再ロード

Question

タブ内のいくつかのイベントの後、リロードしたいと思います。私は、タブに読み込まれるページにパラメータを送信する必要があります。

以下は、ページを再読み込みします：$（ "＃tabs"）。tabs（ 'load'、6）;

しかし、どうすればパラメータを送信できますか？

Answer 1

// Read a page's GET URL variables and return them as an associative array. 
function getUrlVars() 
{ 
    var vars = [], hash; 
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); 

    for(var i = 0; i < hashes.length; i++) 
    { 
     hash = hashes[i].split('='); 
     vars.push(hash[0]); 
     vars[hash[0]] = hash[1]; 
    } 

    return vars; 
} 

その後、あなたはURL変数をつかむことができるし、それに応じてタブを調整します（私はわずか1時間前よりもこれ以上のプロジェクトでこれをやった!!）snipplr.com

Answer 2

タブで別のURLを読み込んでgetパラメータを送信することができます。

Answer 3

から取ら

コードあなたはこのような何かを行うことができます。doens'tプラグイン

var $tabs = $('#example').tabs(); 
var selected = $tabs.tabs('option', 'selected'); 
var newurl = "ajax/tab3.html?extraparm=4"; 
$tabs.tabs('url' , selected , newurl); 
$tabs.tabs('load' , selected); 

jqueryのUIのタブが現在選択されているタブのURLを取得しやすい機能を持っていますが、このような何かをすれば、あなたはそれを得ることができます。

$tabs.find('.ui-tabs-selected a').data('href.tabs'); 

これにより、必要なすべてのURLを変更できます。これは、送信するために余分なデータを設定するためにajaxOptionsを使用して再びタブを選択し、バック空白オブジェクトにデータを設定

var $tabs = $('#example').tabs(); 
var selected = $tabs.tabs('option', 'selected'); 
var extraData = {extraparm:4,otherparm:'foo'}; 
$tabs.tabs('option', 'ajaxOptions', { data: extraData }); 
$tabs.tabs('load' , selected); 
$tabs.tabs('option', 'ajaxOptions', { data: {} }); 

：

また、のような何かを行うことができます。

Answer 4

私はあなたがGETパラメータを意味していると仮定し、それらを入力テキストボックスや選択ボックスなどのフォーム要素から取り出したいと思います...しかし、このロジックを満たしていないパラメータのextraParams引数私が代わりにjQueryのtabIndexに（「＃タブ」）を使用するのを忘れて

function reloadTabWithParams(extraParams) { 
    formParams = jQuery('#someSelectBox').attr('id) +'='+ jQuery('#someSelectBox').val() ; 
    //formParams += whatever els.... 
    var tabIndex = jQuery('#tabs').tabs('option', 'selected'); 
    dataParam = typeof(extraParams) != 'undefined' ? extraParams+'&'+formParams : formParams; 
    jQuery('#tabs').tabs('option', 'ajaxOptions', { data: dataParam }); 
    jQuery('#tabs').tabs('load' , tabIndex); 
    jQuery('#tabs').tabs('option', 'ajaxOptions', { data: {} }) 
} 

が、あなたはそうする必要があります：関数に手動で渡したいです。

Answer 5

FYI、達成する方法はバージョン1.10で変更されました。 1.9では、彼らは "ajaxOptions"を非難しました。これは私が使っていた方法です。 1.10から、この技術はまったく機能しません。

古い方法 $（ "#tabs"）.tabs（{：{ ユーザ名： "foo" という、 パスワード： ajaxOptions "バー" } }）が次のようにする代わりに、あなたは行う必要があります。

新しい方法

$("#tabs").tabs({ 
    beforeLoad: function(event, ui) { 
     ui.ajaxSettings.username = "foo"; 
     ui.ajaxSettings.password = "bar"; 
    } 
}); 

これは質問とは無関係http://jqueryui.com/upgrade-guide/1.9/#deprecated-ajaxoptions-and-cache-options-added-beforeload-event