Jquery tab reload with a parameter

Question

Hello:

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

You could load a different URL in the tab to send get parameters.

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

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.