Question

I have used jquery tabs for loading data with ajax, but I need to add some parameters to the url when the user clicks in a tab. I don’t know the parameters in advance because they come from a form which has been filled by the user. So I’ve tried something like the following code, but I don’t get it working:

<div id="tabs">
    <ul>
        <li><a href="${tab1_url}">Tab 1</a></li>
        <li><a href="${tab2_url}">Tab 2</a></li>
        <li><a href="${tab3_url}">Tab 3</a></li>
    </ul>
</div>

and I serialize the form in an array and join the array to the array containing the satic data.

var staticData = [{name:'id',value:'${myId}'}];
$("#tabs").tabs({
    var $tabs = $("#tabs").tabs({
        ajaxOptions: { data: staticData},
        select: function(event, ui) {
            var dynamicData = $("#common_form").serializeArray();
            var dataToSend = staticData.concat(dynamicData);
            $("#tabs").tabs("option", "ajaxOptions", { 'data': dataToSend });
             return true;
        }
    });
});

but this doesn’t update the ajax data after the tabs are created (I’m seeing the request sent with Firebug and it only includes the initial params).

How can I change the ajax data when the user clicks the tab?

Thanks

EDITED: now with this code works

Answer 1

I think that what you are looking for is the “url” method :

http://jqueryui.com/demos/tabs/#method-url

You code would look something like that :

$(function(){
    $("#tabs").tabs({
        select: function(event, ui) {
           var data = $("#common_form").serialize();               
           if(ui.index == 1){
              var url = '${tab2_url}' + "&" + data;
              $("#tabs").tabs("url", 1, url); //this is new !
           }
           return true;
        }
    });
});