Opened 7 years ago

Closed 7 years ago

Last modified 6 years ago

#8673 closed bug (wontfix)

Tabs: setting data in beforeLoad doesn't work

Reported by: Mamen Owned by: Mamen
Priority: minor Milestone: 1.10.0
Component: ui.tabs Version: 1.9.0
Keywords: Cc:
Blocked by: Blocking:

Description

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)

Change History (14)

comment:1 Changed 7 years ago by 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.

comment:2 Changed 7 years ago by Scott González

Owner: set to Mamen
Status: newpending

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?

comment:3 Changed 7 years ago by Mamen

Status: pendingnew

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.

comment:4 Changed 7 years ago by petersendidit

Resolution: wontfix
Status: newclosed

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.

comment:5 Changed 7 years ago by 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.

comment:6 Changed 7 years ago by Scott González

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

comment:7 Changed 7 years ago by 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?

comment:8 Changed 7 years ago by Scott González

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

comment:9 Changed 7 years ago by 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.

comment:10 Changed 6 years ago by tj.vantoll

#9215 is a duplicate of this ticket.

comment:11 Changed 6 years ago by 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..

comment:12 Changed 6 years ago by 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.

comment:13 Changed 6 years ago by 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 );
}

comment:14 in reply to:  13 Changed 6 years ago by jennifer.mankin@…

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/

Note: See TracTickets for help on using tickets.