jQuery选项卡重新加载参数

Question

在标签中发生一些事件之后，我想重新加载它。 我需要向加载到选项卡的页面发送参数。

以下将重新加载页面：$（“＃tabs”）。tabs（'load'，6）;

但是，如何发送参数呢？

Answer 1

您可以在选项卡中加载其他URL以发送get参数。

Answer 2

// 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变量并相应地调整选项卡（我只是一个小时前在一个项目上完成的操作！）

来自snipplr.com的代码

Answer 3

您可以执行以下操作：

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。

您还可以执行以下操作：

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

这使用ajaxOptions设置要发送的额外数据，再次选择选项卡，然后将数据设置回空白对象。

Answer 4

仅供参考，在1.10版中，完成方式已更改。 在1.9中，他们不赞成使用“ ajaxOptions”。 这是我一直在使用的方法。 从1.10版本开始，该技术完全无效。 相反，您必须执行以下操作

旧方法$（“ #tabs”）.tabs（{ajaxOptions：{用户名：“ foo”，密码：“ bar”}}）;

新方法

$( "#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

Answer 5

我假设您的意思是GET参数，并且您想从诸如输入文本框和选择框之类的表单元素中获取它们，但是我也将extraParams参数用于不符合此逻辑或您想手动传递的参数功能：

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: {} })
}

我忘记了使用tabIndex而不是jQuery（'＃tabs'），但是您应该这样做。