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

Answer 3

I have found a weird solution to the problem. I was calling the ajax form's submit through an 'a' tag like so:

<A href='#' onclick="javascript:$('#ajaxform').submit();">Remove</a>

For some reason calling the '.submit()' from an 'a' tag was messing up in chrome causing a full page refresh instead of an ajax call. I fixed the issue by using the following code instead:

<input type='submit' value='Remove' />

This solution also worked when I needed to add javascript commands to the input to ask for confirmation before deleting. The only gripe is that I needed to swap around some markup to ensure that my buttons were happening within the form that they were submitting (something that I understand isn't always possible in all situations).