Dynamic parameter in jQuery Ajaxt tab url?

Question

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?

Manuel van Rijn · Accepted Answer · 2011-11-11 10:06:41Z

2

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

answered Nov 11, 2011 at 10:06

Manuel van Rijn

10.3k1 gold badge33 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

eagerMoose Over a year ago

I got this just after I posted the question :) Is there a way I can both serialize data from a form AND add a parameter as well, at the same time?

Manuel van Rijn Over a year ago

sure you can. var data = $('form').serializeArray(); data.push({name: 'varName', value: 'varValue'});

eagerMoose Over a year ago

Great, thanks! Is there a simple way to update the value of an existing element in an array?

Venkov · Accepted Answer · 2017-01-04 14:18:13Z

1

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.

answered Jan 4, 2017 at 14:18

Venkov

111 bronze badge

Comments

Chris Wininger · Accepted Answer · 2013-03-20 20:48:50Z

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

Collectives™ on Stack Overflow

Dynamic parameter in jQuery Ajaxt tab url?

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related