#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 10 years ago by
comment:2 Changed 10 years ago by
Owner: | set to Mamen |
---|---|
Status: | new → pending |
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 10 years ago by
Status: | pending → new |
---|
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 10 years ago by
Resolution: | → wontfix |
---|---|
Status: | new → closed |
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 10 years ago by
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 10 years ago by
Sounds like an edge case to me. Write an extension if you need to use POST.
comment:7 Changed 10 years ago by
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 10 years ago by
@raysewell Possibly, these are definitely outside of the scope of tabs core though. Write an extension if you need more control.
comment:9 Changed 10 years ago by
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:11 Changed 10 years ago by
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 10 years ago by
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 follow-up: 14 Changed 10 years ago by
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 Changed 9 years ago by
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.
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 adata
property, it'll get ignored, so as you wrote, modifying theurl
directly is the only way to add data.We should consider doing the settings-merging earlier, directly in tabs code instead of using
beforeSend
.