Jquery tab reload with a parameter

Question

After some events in a tab, I would like to reload it. I need to send a parameter to the page that loads into the tab.

The following reloads the page: $("#tabs").tabs( 'load' , 6);

But, how can I send a parameter with it?

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

Then you can grab the url variables and adjust your tab accordingly (i just did this on a project no more than an hour ago!!)

Code taken from snipplr.com

Answer 3

You can do something like this:

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

The jquery ui tabs plugin doens't have a easy function to get the url of the currently selected tab but if you do something like this you can get it:

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

This will let you modify the url all you want.

You can also do something like:

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

This uses the ajaxOptions to set the extra data to send, selects the tab again and then sets the data back to a blank object.

Answer 4

FYI, the way to accomplish has changed in version 1.10. In 1.9 they deprecated "ajaxOptions". This is the method I had been using. As of 1.10 the technique does not work at all. Instead you must do as follows

Old Way $( "#tabs" ).tabs({ ajaxOptions: { username: "foo", password: "bar" } });

New Way

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

This comes from http://jqueryui.com/upgrade-guide/1.9/#deprecated-ajaxoptions-and-cache-options-added-beforeload-event

Answer 5

I assume you mean GET parameters, and you want to take them from form elements such as input text boxes and select boxes and ... but I also put the extraParams argument for parameters that don't meet this logic or you want to pass manually to the function:

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

I forgot to use the tabIndex instead of jQuery('#tabs'), but you should do so.