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

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 2

@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" />