Why ajaxSubmit does not send a correct ajax request with X-Requested-With=XMLHttpRequest request header

Question

I have googled a lot but I didn't find any solution

I am using jQueryUI Dialog and ajaxSubmit for sending data (file and others) via modal dialog and Ajax.

My problem is very simple: data is sent correctly to the server but not via ajax i.e. there is no request header attribute X-Requested-With=XMLHttpRequest

So what do I do wrong or is there any known issue about this?

Here is some snippet of my code.

$('#photo-dlg').dialog({
  modal: true,
  open: function() { $(this).load("/mywebsite/mydialog");} 
  //importing <form id="formid" method="post" name="updatePhoto" enctype="multipart/form-data"> ...
  buttons: { 
    'cancel' : function() {$(this).dialog('close');}, 
    'submit' : function() { 
               $('#formid').ajaxSubmit({
                   dataType: "json", 
                   success: function (data) { $('#photo-dlg').dialog('close'); })  
               });}
  });

BTW, I have tried options like :

headers: {"X-Requested-With":"XMLHttpRequest"} //OR
data: {"X-Requested-With":"XMLHttpRequest"} //OR
beforeSend: function(xhrObj) {xhrObj.setRequestHeader("X-Requested-With", "XMLHttpRequest")}

without any success

UPDATE:
You can copy/paste the following code into an html page and try by yourself via FireBug (=> No X-Requested-With header)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://d23fbyuk1dcxop.cloudfront.net/js/jquery/jquery.multiselect-1.8.min.gz.js"></script>
    <script type="text/javascript" src="http://d23fbyuk1dcxop.cloudfront.net/js/jquery/jquery.form.min.gz.js"></script>
</head>
<body>
<div id="photo-dlg2">
    <form id="updatePhoto2" enctype="multipart/form-data" elementid="updatePhoto2" name="updatePhoto2" method="POST"
          action="http://mywebsite.com/article/updatePhoto">
        <input type="file" size="50" class="easyinput" id="photoFile" name="photoFile">
    </form>
</div>
<script type="text/javascript">
    $('#photo-dlg2').dialog({
        modal: true,
        buttons: { 'submit' : function() {
            $('#updatePhoto2').ajaxSubmit({
                dataType: "json",
                success: function (data) {
                    alert(data['status']);
                }
            });
        }}
    });
</script>
</body>
</html>

I tried with example @ http://jquery.malsup.com/form/#ajaxSubmit and I could see the header being sent (used firebug to check it.) — Chandu, Jan 07 '11 at 20:41
Perhaps you should post the code you're using to look for the header; the problem could be there and not in your page code. — Pointy, Jan 07 '11 at 21:01
No, the header is not sent. Verified with Firefox and also from the server side. No doubt anout it. — fabien7474, Jan 07 '11 at 21:25
In my case, the problem is using http (works) x https (doesn't work) — Topera, Dec 14 '11 at 18:27

score 4 · Answer 1 · answered Jan 07 '11 at 21:13

4

I've arleady been hit by this bug. I know how lonely you can feel :-)

I've been searching for weeks. Sometimes I had the XMLHttpRequest headers, sometimes I had'nt. So this is maybe not a clear solution but that worked for me.

I tested headers like you did and I tested as well ajax settings altering. Nothing worked until... a complete javascript syntax cleaning of my code. After some IE6 tests it appears that some ';' (or was it ','? no - shut up while I write- it was ';') were missing at some key points, and that any modern browser wasn't impacted... or at least it seems they were not impacted. IE6 was completly broken so we found the syntax issues (by the way -- or maybe by Dichotomy would be more realistic).

I cannot remember exactly (was it between affectations? at the end of a long chaining of parenthesis...), but on every place where I was impacted by this bug I had some syntax errors silently ignored. And for sure jQuery was getting bad (it's like if the ajax settings were cleared). This is the only time in my life I was happy to get an IE6 bug :-)

answered Jan 07 '11 at 21:13

regilero

29,806
6
60
99

But he's seeing the problem in **Firefox**. – Pointy Jan 07 '11 at 21:27
I'll double-check my code. TYhx for the advice. I'll keep you update – fabien7474 Jan 07 '11 at 21:27
1

@Pointy The problem is on every browser. But what regilero says is that because of IE6, they have been able to identify syntax errors that were the root of the problem – fabien7474 Jan 07 '11 at 21:28
@fabien7474 try dichotomy, remove snippets of code, until you get the bad ones. – regilero Jan 07 '11 at 21:32
Ah OK I know what you mean then. – Pointy Jan 07 '11 at 21:32

score 3 · Accepted Answer · answered Jan 08 '11 at 00:21

Ok, it took me a while but I have finally found the answer : THERE IS NO SOLUTION !

Actually it seems that the jquery form plugin cannot upload files using the browser's XMLHttpRequest object ,

Actually I have tried given examples on the plugin website and indeed, if you add a <input type="file" name="photoFile"> to your form, the header X-Requested-With=XMLHttpRequest is never sent to the server and your server cannot detect with usual method if your request is an Ajax request.

Good to know and thanks for your help.

missed the fact you were talking of files, you should try uploadify jquery plugin or other plugins using hidden iframe for that. — regilero, Jan 08 '11 at 00:31

score 2 · Answer 3 · edited Sep 28 '12 at 09:46

2

This might help someone.

I think I know when the problem occurs. When you are using IE 7, 8 or 9 (obviously...), and you are trying to upload a file using ajaxform (I suppose the same thing happens with ajaxsubmit), this is when the problem occurs.

IE doesn't send the X-Requested-With=XMLHttpRequest header. Chrome does send this header, and Firefox too.

edited Sep 28 '12 at 09:46

Mihai Iorga

39,330
16
106
107

answered Aug 10 '12 at 19:16

helpse

1,518
1
18
29

score 0 · Answer 4 · answered Jun 09 '15 at 21:34

0

IE 10 left off my http header (X-Requested-With=XMLHttpRequest) when I had accidentally put 2 forms with the same id on the page.

I know this is old but it came up in google's top 5 results when I was searching on the issue.

answered Jun 09 '15 at 21:34

marshall

11

score 0 · Answer 5 · answered Jan 07 '11 at 22:36

You need to be mindful of commas when defining objects in Javascript. Your code is missing one.

$('#photo-dlg').dialog({
  modal: true,
  open: function() { $(this).load("/mywebsite/mydialog");}, // you had a missing comma here.
  //importing <form id="formid" method="post" name="updatePhoto" enctype="multipart/form-data"> ...
  buttons: { 
    'cancel' : function() {$(this).dialog('close');}, 
    'submit' : function() { 
               $('#formid').ajaxSubmit({
                   dataType: "json", 
                   success: function (data) { $('#photo-dlg').dialog('close'); })  
               });}
  });

But that may not be the cause of your problems.

Unfortunately this is not the problem. I have posted the code itself and you can try by yourself — fabien7474, Jan 07 '11 at 23:28

Why ajaxSubmit does not send a correct ajax request with X-Requested-With=XMLHttpRequest request header

5 Answers5

Linked