Home/ Questions/Q 3669086
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T02:12:03+00:00

I have googled a lot but I didn’t find any solution I am using

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0