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\

Answer 1

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 2

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 3

@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 4

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.

Answer 5

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...