jquery, the jquery form plugin, and detecting an ajax submit

| | Comments (1) | TrackBacks (0)

When you send a request via $.ajax, $.get, or $.post in jquery, you can test for the HTTP_X_REQUESTED_WITH header, looking for a value of 'XMLHttpRequest', a la:

function isajax() { return ((!empty($_SERVER['HTTP_X_REQUESTED_WITH'])) && $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest'); }

But what happens when you're using the jQuery Form plugin? Normally, things work fine. Below the cut for a serious caveat!

The jQuery form plugin supports posting uploads. However, when an upload is posted, the form plugin instantiates an iframe and submits that form, since xmlhttprequest can't be encoded for file uploads.

Therein lies the problem: that xmlhttprequest header will not be set.

I handled it with a hidden field:

<form method='POST' action='/something.php'> <input type='hidden' name='isajaxrequest' id='isajaxrequest' value='0' /> [...] </form>

Now you have a magic variable to check. Then, in your jquery:

$("#myform").ajaxForm() { [...] beforeSubmit: function (formData, jqForm, options) { $("#isajaxrequest").attr("value", 1); }) [...] }

This way, if your form is submitted via iframe, $_REQUEST['isajaxrequest'] (in php parlance) will be non-zero.

WARNING: the isajaxrequest field will only work as presented here in the iframe; so you still have to test for the server header AND the isajaxrequest variable. Why? Because by the time the form plugin calls beforeSubmit, it has already copied the form into an object which will be used to serialize and submit it, and changes to the form do not propagate. What's interesting is, if you apply ajaxForm to a form with an input type='file', it will only use the iframe if that field is selected. So on the same form, clicking submit with the file selected will use an iframe, but clicking submit when the file field is empty will let it submit over xmlhttprequest.

You *can* still use beforeSubmit to set the field regardless, but you'll have to navigate the formData array, which is an array of js objects, like: [ { "name": "isajaxrequest", "value": "1"}, {"name": "someotherfield", "value": "someothervalue" } ]

Not particularly something you want to iterate through if you can avoid it, although if you're concerned about a proxy stripping the xmlhttprequest header, you may want to do it anyhow.

0 TrackBacks

Listed below are links to blogs that reference this entry: jquery, the jquery form plugin, and detecting an ajax submit.

TrackBack URL for this entry: http://www.mattwallace.net/mt-tb.cgi/91

1 Comments

Man , thx for share, but you can play with jquery ajax resources instead this.

Leave a comment

September 2010

Sun Mon Tue Wed Thu Fri Sat
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30    
Creative Commons License
This weblog is licensed under a Creative Commons License.

About The Author

Matt Wallace is a cloud computing architect, and recovering Web Application Developer working on a large e-commerce site and dabbling in social networking applications. He has recurring dreams of manipulating the real world with jQuery.