Jquery ajax() call fails in IE8

Question

I have the following code for submitting data using ajax from forms of class ajax. this works perfectly in Firefox, Safari and Chrome but fails in IE.

ajax: function() {
      $('form.ajax').live('submit', function() {
        var form_ajax = $(this);

        $.ajax({
          url: form_ajax.attr('action'),
          data: form_ajax.serialize(),
          type: form_ajax.attr('method'),
          dataType: 'script',
          beforeSend: function(xhr) {

            $('#ajax-bid-new .ajax-form-error, #ajax-bid-new .ajax-form-success').remove();
            form_ajax.slideUp();

          }
        });

        return false;
      });

Please help - I am stuck here for past 2 days. I am returning a Javascript file from server to be evaluated inside browser. This works as expected in Firefox, Chrome and Safari, but IE receives it as a file and opens up the file download dialog.

What can I do in IE to make this work? I tried by dropping the following code in my application.js file (I'm doing a rails project btw)

// public/javascripts/application.js
jQuery.ajaxSetup({ 
  'beforeSend': function(xhr) {xhr.setRequestHeader("Accept", "text/javascript")}
})

I get the same behavior from IE even after writing the ajaxSetup block like above.

Answer 1

Looks like live doesn't work with submit in IE. Have you tried using a normal submit instead:

$('form.ajax').submit(function() {

Answer 2

To catch live form submit events in IE, instead of:

$("form").live("submit", function() { ... });

to

var submitHandler = function() { ... };
$("body").children().each(function() {
      $("form", this).live("submit", submitHandler);
})

Point to be noted

• IE caches AJAX requests really aggressively (more so than Firefox, anyway). You need to set the Cache-Control headers in the response appropriately if this is not right for your site.

• change your content type, last time i fixed similar problem by changing content-type from application/json; charset=utf8 to just plain application/json

• jQueries' bind and live behaviours along with the liveQuery plugin

Answer 3

LiveQuery plugin solved the problem http://github.com/brandonaaron/livequery