AJAX not working properly with Chrome or newer versions of Safari?

   —   
Read this, this may save you a lot of time if you have problems making your controls work properly with update panels and AJAX. There is way too few information about this on the internet which makes it hard to find. Hopefully this one will serve better than the others.
Hi there,

I was just solving an issue with RegisterClientScriptBlock not working in Chrome and newer versions of Safari. I spent quite a time in searching Google to find just any useful information about this. The reason was that everyone is using different AJAX controls, so the same issue results in many different errors, including:
  • Client side validators breaking the page on AJAX requests (it isn't them really, but if you remove them, you remove the AJAX code which breaks it)
  • RegisterClientScriptBlock not working in update panels
  • RegisterStartupScriptBlock not working in update panels
  • Strange javascript errors in the browser like "ScriptManager is undefined" or "ToolkitScriptManager is undefined"
  • etc.

Here is what I found out during my research and how I understand this issue happened:

I may be wrong but this is what I understood from various internet discussions and what lead me to the solution.

So here is the story:

What happened was that prior versions of Safari (WebKit based browsers) contained some bug that was breaking the AJAX functionality.

Then the good guys from Microsoft came and developed AJAX. While struggling with this Safari bug, they had to include some hack to their AJAX code to be able to work even with this bug. They anticipated that the bug will be around for quite a time so they hardcoded the fix to apply to all WebKit versions in the future.

But then the bad guys came (well, maybe they were also good, but in a different way), and fixed the bug in Safari, which resulted in bug in already existing code of AJAX which is still applying the hack to fix it.

How to solve it?

Well it is quite simple, but no one would ever anticipate it. You need to convince the browser that it is not a browser with this bug that needs to be workarounded, but that it is some completely different browser. Here is how you do it, just add following javascript code to your page:

if (typeof(Sys.Browser.WebKit) == "undefined") {
  Sys.Browser.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";
}

This makes sure that the AJAX fix to the WebKit browsers won't apply and it will allow your AJAX code work.

Neat, isn't it?

My thanks belong mainly to following two sources:

http://blog.lavablast.com/post/2008/10/20/Gotcha-WebKit-(Safari-3-and-Google-Chrome)-Bug-with-ASPNET-AJAX.aspx
http://stackoverflow.com/questions/508994/asp-net-dropdownlist-autopostback-and-google-chrome

Now I can find much more sources regarding the same issue because I know what we are dealing with exactly, but as I said, it is very hard to find something initially, without prior knowledge, you just don't know what to look for ...

And also note, that with Kentico CMS 5.0, this issue will be fixed automatically.

See you next time
Share this article on   LinkedIn

Martin Hejtmanek

Hi, I am the CTO of Kentico and I will be constantly providing you the information about current development process and other interesting technical things you might want to know about Kentico.

Comments

Martin Hejtmanek commented on

Well, maybe you are dealing with some completely different issue. You said your Backspace and Delete is not working as expected. Did you get any of the issues I mentioned in my post?

Client side validators breaking the page on AJAX requests (it isn't them really, but if you remove them, you remove the AJAX code which breaks it)

RegisterClientScriptBlock not working in update panels

RegisterStartupScriptBlock not working in update panels

Strange javascript errors in the browser like "ScriptManager is undefined" or "ToolkitScriptManager is undefined"

This fix is specific to those issues ...

Riya Menghani commented on

I am not getting any javascript errors. I have tried the code in all possible places, but its not working. :(

Below is the code within <form></form> tags, for your reference:

<form id="form1" runat="server">
<script type="text/javascript" language="javascript">
if (Sys.Browser.WebKit == undefined) {
Sys.Browser.WebKit = {};
alert('outside');
if( navigator.userAgent.indexOf( 'WebKit/' ) > -1 )
{
alert('Inside');
Sys.Browser.agent = Sys.Browser.WebKit;
alert('Inside1');
Sys.Browser.version = parseFloat( navigator.userAgent.match(/WebKit\/(\d+(\.\d+)?)/)[1]);
alert(Sys.Browser.version);
Sys.Browser.name = 'WebKit';
alert(Sys.Browser.name);
}
}
</script>
<div>
<table>
<tr>
<td>ASP.Net MaskedEditExtender</td>
<td><asp:maskededitextender runat="server" ID="personalPhoneMask" TargetControlID="personalPhoneTextBox"
MaskType="None" Mask="(999)\ 999\-9999" ClearTextOnInvalid="true" />
<asp:TextBox runat="server" ID="personalPhoneTextBox" /></td>
</tr>
<tr><td colspan="2"><asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" CombineScripts="true">
</asp:ToolkitScriptManager></td></tr>
</table>
</div>

</form>

Martin Hejtmanek commented on

Hi,

It has been some time so I do not recall exactly. Definitely, after </html> is not a good place, it is a javascript so it must be within the valid location in the HTML (either in head or body), in valid script tag. Try following options, one of them should work:

1) Put it to the head tag
2) Put it to the beginning of the form
3) Put it at the end of the body

If none of these will work, let me know what it does and if you get any javascript errors.

Riya Menghani commented on

Kindly show me where exactly did you add it on the page. I tried it, at the end, just after </html>, but, I think I am doing something wrong. Please help.

Martin Hejtmanek commented on

Hi Riya,

I tried to include this through ScriptReference too, with no luck, so I put that directly to the page code, and it worked

Riya Menghani commented on

Hi,
I have tried the above steps, but, I am still not able to get the desired results. I am using ASP.Net 3.5 and Safari 4.0.5. I am using the below code:
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" CombineScripts="true">
<Scripts>
<asp:ScriptReference Path="~/Scripts/ForWebKit.js" />
</Scripts>
</asp:ToolkitScriptManager>
I tried with javascript alerts in ForWebKit.js file, the alerts are getting fired correct, but, the problem of backspace and delete still occurs. The problem is not getting fixed.

Martin Hejtmanek commented on

What exactly?

Balaji commented on

Still not working