X-Requested-With header not set in jquery ajaxForm plugin

Question

I'm using the jQuery ajaxForms plugin to make an ajax submit to my CakePHP app.

Cake's RequestHandler detects ajax requests by looking at the "X-Requested-With" header, but the forms plugin does not seem to set it. Or jQuery does not set it when using the plugin.

I've tried several things,

in the main onload function i added:

$.ajaxSetup({
    headers: {"X-Requested-With":"XMLHttpRequest"}
});

In the plugin code I added this right before the actual ajax call:

options.beforeSend = function(xhr) {
    xhr.setRequestHeader("X_REQUESTED_WITH", "XMLHttpRequest");
};

Making a regular ajax call, does set the header...

Can anyone tell me what's going on or most important, how can I fix this?

Answer 1

@Nicky De Maeyer's answer to his own question

Actually you don't need to do this yourself (appending a hidden input field).

AFAIK you can just pass such data to ajaxForms plugin in the options object

$('#myForm1').ajaxForm({data:{"X_REQUESTED_WITH":"XMLHttpRequest"}});

Should automagically (in the hidden iframe file upload case) append such an input to your form on submission

<input type="hidden" name="X_REQUESTED_WITH" value="XMLHttpRequest" />

Answer 2

New development:

As of now, the jquery.form plugin now supports multipart (including file) Uploads very well , in a cross-browser compatible way, and sets the X-Requested-With header. I was having this problem with an older version of jquery.form and the upgrade to 3.02 fixed it!

Answer 3

Going from petersendidit's comment, I went searching for ajax/file upload questions.

there's an interesting question on it on SO stating it is not possible, only through a hack with an iFrame. So no actual ajax call is made...

since my form is a multipart with a file upload, the plugin uses the iFrametechnique instead of the regular ajax call...

To solve this to know this should resemble an ajax call i'll add a hidden input field on the multipart forms...

Answer 4

I found the problem to be lack of support for file uploads in older versions of the plugin. When I removed the file inputs, the problem went away.

Answer 5

I just had to deal with an issue today that was similar to this and came up with a different solution. The issue came up with Chrome, Safari, and IE where the header (which I was checking in PHP via $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest' ) wasn't matching.

As it was outlined in a previous answer, when using jQuery ajax functions, this header will be already set by jQuery.

In said browsers above, when using:

options.beforeSend = function(xhr) {
    xhr.setRequestHeader("X_REQUESTED_WITH", "XMLHttpRequest");
};

Those browsers (not Firefox) would append that to the header. So in actuality, the header was set as: 'XMLHttpRequest, XMLHttpRequest'

Bottom line, don't set this header when using jquery AJAX functions. Hopefully that solves someones headache.