14

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?

NDM
  • 6,731
  • 3
  • 39
  • 52
  • 4
    jQuery will add the X-Requested-With XMLHttpRequest header on ajax calls and the ajaxForms plugin uses jquerys ajax function to do ajax calls. The only time I could see it not getting sent is if you are doing a file upload with the ajaxForms plugin – PetersenDidIt Dec 04 '09 at 13:49
  • 1
    it is idd a multipart form... why does it do this, and can this be fixed? – NDM Dec 04 '09 at 15:17

5 Answers5

12

@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" />
jitter
  • 53,475
  • 11
  • 111
  • 124
  • 7
    Just as a side not for people using ASP.NET MVC. MVC is case sensitive and will not recognise the parameter unless the name is "X-Requested-With". – kim3er Jul 13 '10 at 15:15
3

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!

B Robster
  • 40,605
  • 21
  • 89
  • 122
2

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

Community
  • 1
  • 1
NDM
  • 6,731
  • 3
  • 39
  • 52
0

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.

Daniel
  • 794
  • 10
  • 20
0

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.

Brandon G
  • 2,733
  • 3
  • 25
  • 24