Why doesn't Ajax.BeginForm work in Chrome?

Question

I'm working with c#.NET MVC2 and I'm trying to create an ajax form that calls a method that deletes a database record (RemoveRelation). The process of deleting the record is working as intended. After the record is deleted the form should call a javascript function that removes the record from the visuals (RemoveRelation(10)). This is done through an AJAX call that on Internet Explorer 9 and Firefox 4 are all working as intended however on Chrome for some reason the update is not happening throuhg an AJAX call and the whole page is refreshing when the form to delete the record is being submitted (this is incorrect as the form is supposedly being generated with AJAX functionality). This is the code with which I am generating the form:

 <% using (Ajax.BeginForm("RemoveRelation", "Relations",
       new AjaxOptions { OnSuccess = "function() { RemoveRelation(10); } ", InsertionMode = InsertionMode.Replace, UpdateTargetId = "Relation10" },
       new { id = "DeleteForm10" }))
   { %>

Additionally on Chrome I have another issue with a separate Ajax.BeginForm.

<% using (Ajax.BeginForm("AddRelation", "Relations", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "AddRelation" }, new { id = "AddRelationForm" }))
  { %>

The above Begin Form code is used to add Relations to the list instead of the removing them. Once again I stress, on IE9 and FF4 the above is working as intended, on chrome instead of adding one and updating through ajax, it's instead adding the record twice and once again refreshing the whole page rather than doing the ajax update.

Why is this breaking down in chrome?

Answer 1

There's an issue with Microsoft AJAX and certain webkit browsers. I ran into this issue myself a while ago, and the fix is pretty simple. Create a webkit.js file and put this in the contents:

Sys.Browser.WebKit = {}; //Safari 3 is considered WebKit
if( navigator.userAgent.indexOf( 'WebKit/' ) > -1 )
{
    Sys.Browser.agent = Sys.Browser.WebKit;
    Sys.Browser.version = parseFloat( navigator.userAgent.match(/WebKit\/(\d+(\.\d+)?)/)[1]);
    Sys.Browser.name = 'WebKit';
}

Then either within your ScriptManager or somewhere in your page (preferably in a master page, I added it near the end), add the script reference:

<Scripts>
    <asp:ScriptReference Path="webkit.js" />
</Scripts>
//OR
<script src="webkit.js">

Can't remember the original site that I found the info, but this I was able to get from this page. Good luck!

Answer 2

you may update your project to use asp.net MVC 3 , within mvc 3 , jquery ajax is the default