CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-tabs
eagerMoose
eagerMoose

Reputation: 1133

Dynamic parameter in jQuery Ajaxt tab url?

I have a set of jQuery Ajax tabs which need to be opened using a dynamic parameter, defined in a global Javascript variable.

So far I have this:

function getVariable() {
    return globalVar;
}

$(document).ready(function(){
    $("#tabs").tabs({
        ajaxOptions: {
            data: {dynamicParameter: getVariable()}
        }
    });
});

<div id="tabs">
    <ul>
        <li><a href="firstTab.html" title="first">First</a></li>
        <li><a href="secondTab.html" title="second">Second</a></li>
    </ul>
</div>

When I click on each of the tabs, request is generated as "firstTab.html?dynamicParameter=someValue".

The problem is, as globalVar value changes, my requests do not, they remain exactly the same as with initial load. Is there a way I can get them to reflect the changes from my variable?

Upvotes: 0

Views: 1986

Answers (3)

Venkov
Venkov

Reputation: 11

Remove the brackets '()'

{dynamicParameter: getVariable()}

to 

{dynamicParameter: getVariable}

that way you will pass the function, not the value. and when it is called it will ask for the new value.

Upvotes: 1

Chris Wininger
Chris Wininger

Reputation: 691

FYI, the code supplied in the answer above used to work for me in 1.9, but after upgrading to jquery 1.10 I found it no longer worked. I also found the a post on the jquery site explaining the change and the new way to accomplish this; so, I thought I would share

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

It may be that this no longer work either; however as I later found this second link. Which seems to imply that the only way to pass data is now in the beforeSend method using the ui.ajaxSettings.url property. This of course limits you to get requests. I wish they had left this functionality alone.

Here is a link to the post http://jqueryui.com/upgrade-guide/1.9/#deprecated-ajaxoptions-and-cache-options-added-beforeload-event

http://bugs.jqueryui.com/ticket/8673

Upvotes: 0

Manuel van Rijn
Manuel van Rijn

Reputation: 10305

the problem is that the ajaxOptions are set on init of the tab. You should do something like this to override the data propertie.

you can use the select callback to overide the ajaxOptions

(haven't tested this)

$("#tabs").tabs({
    select: function() {
        $(this).tabs("option", { ajaxOptions: { data: { dynamicParameter: getVariable() } } });
    },
    ajaxOptions: {
        data: {dynamicParameter: getVariable()}
    }
});

Upvotes: 2

Related Questions