single Ajax Post request not working in IE

Question

I have some code that uses jquery to create dialogs from some hidden forms in my html:

$("#editdeletediv").load().dialog(
     {   //Set options for the dialog here
       title: 'Edit/Delete log',
       modal: true,
       autoResize:true,
       maxWidth: 600,
       minWidth: 500,
       buttons: {
           Delete: function(){
               $('#confirmdelete').load().dialog(
                   {   //Set options for the dialog here
                               title: 'Confirm deletion',
                               modal: true,
                               autoResize:true,
                               maxWidth: 300,
                               minWidth: 250,
                                buttons: {
                                    Yes: function(){
                                          $.ajax({
                                              url: 'removelog',
                                              type: "POST",
                                              data: { id: calEvent.id}, 
                                              dataType: "json", 
                                              success:function(response){
                                                window.location.href = response;
                                              }                      
                                          });
                                    },
                                    No: function(){
                                         $(this).dialog('close');
                                        }
                                    }
                               });                                                                               
                                },
           Save: function(){
                  var input = $("<input>")
                   .attr("type", "hidden")
                   .attr("name", "id").val(calEvent.id);
                  $('#editdeleteform').append($(input));

                  var formdata = new FormData($("#editdeleteform")[0]);
                  $.ajax({
                          url: 'updatelog',
                          type: 'POST',
                          data: formdata,
                          async: false,
                          success: function (response) {
                                    window.location.href = response;
                                    },
                          cache: false,
                          contentType: false,
                          processData: false
                  });                                  
                 }
 }
});

This all works in chrome and firefox, but in IE it's a different matter. The ajax post to 'updatelog' doesn't seem to work in IE but the post to 'removelog' does. Does anyone know what might be the issue here, I think it might be the,

var formdata = new FormData($("#editdeleteform")[0]);

but I need that formdata variable as the fields I'm passing to the post might be different in the future (I might dynamically create more html elements), so I need a way to get everything from that form without hard coding it into my javascript

EDIT: figured out how to get a console open in internet explorer and now I know for sure it's the FormData where the problem is arising:

SCRIPT5009: 'FormData' is undefined

Does anyone know of an alternative that works in chrome, firefox and IE or does anyone know how I can work around this problem for IE?

EDIT: I decided it's more trouble than it's worth, this is for an intranet site solution so spending too much time on this would be a waste (I can just require my users to use specific browsers/versions if they want full functionality)

So I just did this:

 if(typeof FormData !== 'undefined'){
                                        var formdata = new FormData($("#editdeleteform")[0]);
                                    }
                                    else{
                                        var formdata = {
                                            'id' : calEvent.id,
                                            'editdate' : $("#editdate").val(),
                                            'editcomment' : $("#editcomment").val(),
                                            'editworkhours' : $("#editworkhours").val(),
                                            'editdoctorsnote' : ''
                                        };
                                    }

yes, the form has both standard fields aswell as fields that are added to it at runtime, the biggest problem is that it has a field which is used for file upload — Jeremy C., May 26 '15 at 12:17
Then your only option is to set the target of the form to an iframe or just use a file upload plugin. — Musa, May 26 '15 at 12:20
I decided to solve it by hardcoding the elements I need for basic functionality into var formdata if the FormData type is undefined, the file upload won't work but I can't afford to spend too much time on this issue — Jeremy C., May 26 '15 at 12:25

score 0 · Answer 1 · answered May 26 '15 at 12:04

0

FormData isn't compatibile with ie 7-9 see: https://developer.mozilla.org/en-US/docs/Web/API/FormData

answered May 26 '15 at 12:04

madalinivascu

32,064
4
39
55

Do you know any way to work around this so I can have the same functionality that does work in IE9 (I don't think 7-8 will be necessary) – Jeremy C. May 26 '15 at 12:10
use iframes: see http://stackoverflow.com/questions/2909442/how-to-make-asynchronousajax-file-upload-using-iframe – madalinivascu May 26 '15 at 12:12

score 0 · Answer 2 · answered May 26 '15 at 12:12

0

var formdata = $("#editdeleteform").serialize()

Try this to send form data to updatelog. This may helps you.

answered May 26 '15 at 12:12

surekha shelake

246
3
7

score 0 · Accepted Answer · answered Jun 09 '15 at 12:58

I decided it's more trouble than it's worth, this is for an intranet site solution so spending too much time on this would be a waste (I can just require my users to use specific browsers/versions if they want full functionality)

So I just did this:

 if(typeof FormData !== 'undefined'){
                                        var formdata = new FormData($("#editdeleteform")[0]);
                                    }
                                    else{
                                        var formdata = {
                                            'id' : calEvent.id,
                                            'editdate' : $("#editdate").val(),
                                            'editcomment' : $("#editcomment").val(),
                                            'editworkhours' : $("#editworkhours").val(),
                                            'editdoctorsnote' : ''
                                        };
                                    }

single Ajax Post request not working in IE

3 Answers3