MVC4 Unobtrusive AJAX BeginForm Internet Explorer DIV Empty

Question

I wonder if anyone can help me. I am attempting to add unobtrusive AJAX to my MVC 4 application. I have the following scripts added to my page.

<script src="/Scripts/jquery-1.8.2.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>

The Unobtrusive AJAX library is a NUGET package version 3.2.0

I have a DIV that I'm attempting to update via AJAX, simplified as shown below.

@using (Ajax.BeginForm("MyAction", "MyController", new AjaxOptions { UpdateTargetId="MainForm", HttpMethod = "POST" }))
                        {
<div id="MainForm">
<div style="padding-top:10px">
<input type="submit" style="width:100px" value="Search"/>
 </div>
</div>
}

Then I have a controller to return a partial view into the DIV.

    [HttpPost]
    public ActionResult MyAction(Models.WhateverModel MyModel)
    {

        return PartialView("MyPartialView");
    }

You click the submit button and in Chrome and Firefox this works fine, the div MainForm is updated with the contents of my returned partial view.

I put a break point in on my action, when run in IE8, the server side action code is reached, but the MainForm DIV ends up empty.

I turned script errors on in IE8, but no script errors occur.

I also tried switching to jQuery 1.11.1 but this did not help.

I've been searching around in the forums and I can't find an obvious fit for this issue.

Any ideas?

Answer 1

After a further two hours of searching, I found a post that suggested making sure that all your HTML tags are in correct alignment.

The suggestion was that internet explorer is less able to deal with incorrectly formed HTML.

After checking my page using the HTML validator plugin for firefox I found I had a div tag out of alignment.

Once I fixed that everything started working correctly in internet explorer.

Leaving this here as it may help someone else who has the same issue.