How is it possible that Request.IsAjaxRequest() is true from firefox but false from IE when using jquery post

Question

i am trying to test jquery post. I am posting a form and want to update in ajax and replace with a success form over a div (seems like a common use case).

The following code works fine in firefox but not in IE.

One issue is that from Firefox Request.IsAjaxRequest() is true but coming from IE, Request.IsAjaxRequest() is returning false

NOTE: i put in the Thread.Sleep in my controller action just as a test to make sure i can see whats going on.

Here is my view code:

 <div id="contact">
   <form action="/Tracker/Add" method="post">
    <fieldset id="inputbox">
       <p>

        <label>Today's number</label>   <input class="inputText" id="weight" name="weight" type="text" value="208" /></p>
        <p><label>Today's Date</label>     <input class="inputText" id="datepicker" name="date" type="text" value="03-Mar-2010" /></p>
        <p><input type="submit" value="Enter" /></p>
    </fieldset>

and here is the javascript / jquery code:

<script type="text/javascript" src="../../Scripts/jquery/1.3.2/jquery-1.3.2.min.js"></script>

 <script type="text/javascript">
    $(document).ready(function() {
    $('#contact form').live('submit', function() {

            //$("#Loading").fadeIn(); //show when submitting

            $.post($(this).attr('action'), $(this).serialize(), function(data) {
                $("#contact").replaceWith($(data));
            });
            return false;
        });
    });
</script>

and here is my controller action:

    public ActionResult Add()
    {
         if (if (Request.IsAjaxRequest())
         {
                  //firefox will hit this but IE wont
          }


        Thread.Sleep(5000);
        return PartialView("EntryView", new MyViewModel());
    }

Answer 1

It looks like there's a javascript error happening in IE which prevents from calling the action asynchronously. Verify the presence of the HTTP header X-Requested-With: XMLHttpRequest while debugging.

Answer 2

I verified that your code (in which I was unable to find an error) was not sending an XHR request with jQuery 1.3.2 and IE 6.0.2900.5512; upgrading jQuery to the next available version, 1.4.0, fixed the broken behavior. With 1.4.0 (and above), IE posts the form using AJAX and sends the X-Requested-With header required for IsAjaxRequest() to work. Are you able to upgrade jQuery? I didn't have any luck finding the specific bug/fix for this, but if you need to stick with 1.3.2, I can keep digging.

Answer 3

Add the following code, right after jQuery code:

jQuery.ajaxSetup({
    beforeSend: function(xhr) {
        xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    }
});

It forces the browser to add the X-Requested-With header for every AJAX request.

Worth noting that using the newest version of jQuery is recommended as there are many bug fixes.

If it doesn't help, please inspect the request with Fiddler to see if IE sends the header or not.