Tabs: setting data in beforeLoad doesn't work

[Mamen]

In earlier versions additional data could be sent with data parameter. With increased control of ajaxSettings and jqXHR, this should be easier now. But it doesn't work. Consider the following code:

$("#tabs").tabs({
	beforeLoad: function(event, ui){
		//To add additional data
		ui.ajaxSettings.data.foo = "bar";
		//OR overwrite all data
		ui.ajaxSettings.data = {foo: "bar"};
	}
});

As a work around you could write this:

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

However the latter has several disadvantages, and may not work without additional code. (Such as checking if & or ? should be used)

[Jörn Zaefferer]

The new implementation uses jQuery's beforeSend callback under the hood, which runs after most of the data processing that jQuery's ajxa method does. So while you can add a data property, it'll get ignored, so as you wrote, modifying the url directly is the only way to add data.

We should consider doing the settings-merging earlier, directly in tabs code instead of using beforeSend.

[Scott González]

We can't do merging earlier without adding another event since we need to get the jqXHR instance for this event to actually be useful.

@Mamen: What is your actual use case for modifying the data?

[Mamen]

Since I have similar data in across several tabs, I need to get information about which tab I am in. This is due to scoping/prefixing.

[petersendidit]

There is away to handle this use case. And jQuery.params(); can help you if you want to use an object rather than a string for your data. Yes handling the ? and & is a little more work, but the use case is pretty rare.

[moony]

This workaround only works for GET-requests. In my case I have many data to send to the server. With the workaround the URL will be too long. The only way is to use the data parameter with a POST request.

[Scott González]

Sounds like an edge case to me. Write an extension if you need to use POST.

[raysewell]

I'm not sure how rare the use case is. I had a similar issue: I have form fields on my tabs that allow users to enter lots of data. With all of that data in the URL, the server will reject the request. I was able to work around this by extending the tabs function (as suggested) and using $.ajaxPrefilter to set the data. I would, however, vote for fixing this, if possible. If not, then the documentation should be updated to say that the data field cannot be updated and pointing to this workaround. Are there other Ajax options that cannot be updated here?

[Scott González]

@raysewell Possibly, these are definitely outside of the scope of tabs core though. Write an extension if you need more control.

[DysprosiumDy]

Seems pretty counterintuitive to get the ajaxSettings object and its data property only to find out using it is useless. Took me quite some time today to figure out why my code wasn't working. We're upgrading our entire webservice to 1.10 and this seemed very odd. Could you possibly document this in the API? Might save some people a few hours of frustration.

[tj.vantoll]

#9215 is a duplicate of this ticket.

[Abdul Narayan]

There are also non-trivial security implications. Please read here for more details : ​http://blog.httpwatch.com/2009/02/20/how-secure-are-query-strings-over-https/

It is not as simple as converting form data into query arguments. Often times there are access-tokens or session information, as you can imagine when flipping between tabs. You are essentially forcing users to pass that on URL and have it logged on 3rd party hosting services..

[Scott González]

We're not forcing anything. Tabs provides the necessary events for you to implement any behavior you want, including POST Ajax requests. You just won't be able to use the built-in Ajax support.

[mattpratt]

This is the hack I came up with to get jQuery to send the post data:

beforeLoad: function( event, ui ) {
   ui.ajaxSettings.type = 'POST'; 
   ui.ajaxSettings.hasContent = true;
   ui.jqXHR.setRequestHeader( "Content-Type", ui.ajaxSettings.contentType );
   ui.ajaxSettings.data = jQuery.param( { foo: 'bar'}, ui.ajaxSettings.traditional );
}

[[email protected]…]

The "hack" provided above doesn't actually work for POST operations...

You can use $.ajaxPrefilters(). Could get hairy for complex solutions, perhaps, but definitely workable.

​http://jsfiddle.net/evuZz/7/