Why does my JQuery .Ajax load data into a new page instead of replacing the specified element?

Question

When using JQuery .ajax my content is put into a new page instead of replacing the specified element. I use something very similar in the same site with no problems, but this one section does not like something and throws this error:

Microsoft JScript runtime error: Object expected

After selecting Continue it loads the data into a new page instead of the specified selector.

I have the following included in the _Layout page:

• < script src="@Url.Content("~/Scripts/jquery-1.7.2.min.js")" type="text/javascript"/>
• < script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"/>
• < script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"/>

The page code is as follows:

<link href="../../Content/themes/base/jquery.ui.autocomplete.css" rel="stylesheet" type="text/css" />
<link href="../../Content/Tasks.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
$(document).ready(function () {
    $('#btnSaveNewTicket').hide();
    $('#frmTaskDetail').one('submit', function (e) {
        e.preventDefault();
        alert('tru dat');
        $.ajax(
        {
            cache: false,
            async: true,
            type: "POST",
            url: $(this).attr('action'),
            data: $(this).serialize(),
            success: function (data) {
                $('#divTaskDetail').empty();                
                $('#divTaskDetail').html(data);
            },
            complete: function () {
                $('#hidTdAccId').val('');
                $('#hidTdUserId').val('');
                $('#hidTdTicketId').val('');
            }
        });
        return false;
    });

});
</script>

<div id="divTaskDetail">
@using (Html.BeginForm("DetermineTicketAction", "Dispatch", FormMethod.Post, new { id = "frmTaskDetail" }))
{
<div style="background-color: #2C6B87; width: 99%; border: 1px black solid; text-align: left; text-indent: 5px; margin: 1% 0 0 0; padding: 5px 0 5px 0; font-size: 12px; color: white; font-weight: bold">
    Task Details
</div>
<div style="width: 99%; border: 1px black solid;">

    @Html.Hidden("AccountId")       
    @Html.Hidden("ContactId")
    @Html.Hidden("CompanyId")
    @Html.Hidden("TicketId")
    @Html.Hidden("TicketCreated")
    @Html.Hidden("Created")
    @Html.Hidden("TicketClosed")
    @Html.Hidden("isActive")

    <table id="tblTaskDetail" style="width: 100%; text-indent: 5px; color: White; margin: 0 auto; font-size: 12px; top: 0; left: 0;">                    
                <tr>
                    <td>Ticket ID</td>
                    <td>@Html.TextBox("TicketId" ,null, new { @disabled = true })</td>
                    <td>Address</td>
                    <td>@Html.TextBox("Address", null, new {@disabled = true })</td>

                </tr>
                <tr>
                    <td>Date Created</td>
                    <td>@Html.TextBox("Created",null, new { disabled = true })</td>
                    <td>City</td>
                    <td>@Html.TextBox("City",null, new { disabled = true })</td>
                </tr>
                <tr>
                    <td>Company Name</td>
                     <td>@Html.TextBox("CompanyName")<input type="button" id="addCompany" value="+" /></td>
                    <td>State</td>
                    <td>@Html.TextBox("State",null, new { disabled = true })</td>
                </tr>
                <tr>
                    <td>Customer Name</td>                    
                    <td>@Html.TextBox("ContactName")<input type="button" id="addContact" value="+" /></td>
                    <td>Zip Code</td>
                    <td>@Html.TextBox("ZipCode", null, new { disabled = true })</td>
                </tr>
                <tr>
                    <td>Category</td>
                    <td>@Html.DropDownList("CategoryId")</td>
                    <td>Phone Number</td>
                    <td>@Html.TextBox("Phone", null, new { disabled = true })</td>
                </tr>
                <tr>
                    <td>Status</td>
                    <td>@Html.DropDownList("StatusId")</td>
                    <td>E-mail</td>
                    <td>@Html.TextBox("Email", null, new { disabled = true })</td>
                </tr>
                <tr>
                    <td>Priority</td>
                    <td>@Html.DropDownList("PriorityId")</td>
                    <td>Paid</td>
                    <td>@Html.DropDownList("Paid")</td>
                </tr>
                <tr>
                    <td>Task Description</td>
                    <td>@Html.Editor("Description")</td>
                    <td>Assign To</td>
                    <td>@Html.DropDownList("UserId")</td>
                </tr>       
    </table>
    <table style="width: 100%; text-indent: 5px; color: White; margin: 0 auto; font-size: 12px; top: 0; left: 0;">
        <tr>
            <td>Comments @Html.TextBox("Comments", "", new { style = "width: 15%" })</td>
         </tr>
        <tr>
            <td> 
                @Html.ListBox("CommentList", @ViewBag.CommentList as IEnumerable<SelectListItem>, new { id="CommentList", style = "font-size: 10px" })
            </td>
        </tr>
    </table>

    <input type="hidden" id="hidTdAccId" name="hidTdAccId" value="" />
    <input type="hidden" id="hidTdUserId" name="hidTdUserId" value="" />
    <input type="hidden" id="hidTdTicketId" name="hidTdTicketId" value="" />
    <input type="hidden" id="hidSubType" name="hidSubType" value="" />
</div>

<input type="submit" id="btnSave" name="btnSave" value="Save" />
<input type="button" id="btnClearTicket" name="btnClearTicket" value="New Ticket"/>
<input type="submit" id="btnSaveNewTicket" name="btnNewTicket" value="Save New Ticket" />
<input type="submit" id="btnGetDetail" name="btnGetDetail"  style="visibility: hidden"  />
}
</div>

Any help/thoughts are appreciated. Thanks!

Answer 1

For some reason, the Jquery ajax works fine in chrome/safari, but it would not work for IE. Replacing JQuery Ajax with the Ajax helper did the trick for me.

Thanks for the help and suggestions. +1 for your time and intelligent approach.