Search code examples
jqueryasp.net-mvcblockuijquery-blockui

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


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());
    }

Solution

  • 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.