WebKit Brower Issues (Ajax Related) in UI for ASP.NET AJAX Input

Xorcist

98 posts

Member since:
Apr 2009

Posted 31 Mar 2010 Link to this post

Basically it appears that WebKit browsers like Chrome and Safari are triggering requests when they shouldn't (IE and Firefox appear unaffected).This example has a simple RadTextBox with a button which calls an onclick event for a hidden button. Clicking the textbox's button works fine, calling the onlick of the hidden button works fine, but pressing ENTER inside the textbox to issue an ajax request via the hidden button fails to show the loading panel, in fact it does show it, but it immediately hides it due to a back to back requests and responses. After the first ENTER, subsequent ENTERS cause mulitple responses that do not match the number of requests, however the textbox's button will show the loading panel despite having an incorrect number of responses? Can anyone help explain/fix this?

Here is a very simple sample: (Q2-2009 RadAjax.NET Controls)
ASPX

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="WebKitTest.aspx.cs" Inherits="WebKitTest" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

  <head runat="server">

    <title>WebKitTest</title>

    <telerik:RadStyleSheetManager id="RadStyleSheetManager" runat="server" />

  </head>

  <body>

    <form id="frmWebKit" runat="server">



        <telerik:RadScriptManager ID="RadScriptManager" runat="server">

            <Scripts>

                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

            </Scripts>

        </telerik:RadScriptManager>



        <telerik:RadAjaxManager ID="RadAjaxManager" runat="server" ClientEvents-OnRequestStart="Ajax_OnRequestStart" ClientEvents-OnResponseEnd="Ajax_OnResponseEnd">

        <AjaxSettings>

          <telerik:AjaxSetting AjaxControlID="btnHidden">

            <UpdatedControls>

              <telerik:AjaxUpdatedControl ControlID="pnlWebKit" LoadingPanelID="RadAjaxLoadingPanel" UpdatePanelRenderMode="Inline" />

            </UpdatedControls>

          </telerik:AjaxSetting>

        </AjaxSettings>

        </telerik:RadAjaxManager>

      <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel" runat="server" Skin="Default">

      </telerik:RadAjaxLoadingPanel>

      <telerik:RadScriptBlock runat="server" ID="RadScriptBlock">

        <script type="text/javascript">

          function Ajax_OnRequestStart(sender, args) {

            var log = document.getElementById('divLog');

            loglog.innerHTML = log.innerHTML + '<br />Start Request; ID:' + args.get_eventTargetElement().id;

          }

          function Ajax_OnResponseEnd(sender, args) {

            var log = document.getElementById('divLog');

            loglog.innerHTML = log.innerHTML + '<br />End Request; ID:' + args.get_eventTargetElement().id;

          }

          function txtWebKit_OnKeyDown(event) {

            if (event.keyCode == 13) {

              txtWebKit_OnClick();

            }

          }

          function txtWebKit_OnClick(sender, args) {

            var log = document.getElementById('divLog');

            loglog.innerHTML = log.innerHTML + '<br />';

            $get('<%= btnHidden.ClientID%>').click();

          }

       </script>

      </telerik:RadScriptBlock>



        <asp:Panel ID="pnlWebKit" runat="server" Width="190px" Height="25px" BorderStyle="Solid" BorderWidth="1px">

           

          <telerik:RadTextBox ID="txtWebKit" runat="server" Width="180px" ShowButton="true" onkeydown="txtWebKit_OnKeyDown(event);" >

          <ClientEvents OnButtonClick="txtWebKit_OnClick" />

        </telerik:RadTextBox>

        </asp:Panel>

      <div style="display:none;">

        <asp:Button ID="btnHidden" runat="server" Text="HiddenButton" OnClick="btnHidden_Click" />

      </div>

      <div id="divLog" runat="server" style="display:block" >

      </div>



      </form>

  </body>

</html>

C#

    
            using System;  
        
            using System.Web;  
        
            using System.Web.UI;  
        
            using System.Web.UI.WebControls;  
        
            using System.Data;  
        
            using System.Configuration;  
        
            using System.Web.Security;  
        
            using System.Web.UI.WebControls.WebParts;  
        
            using System.Web.UI.HtmlControls;  
        
            using Telerik.Web.UI;  
        
            public partial class WebKitTest : System.Web.UI.Page  {  
        
              protected void Page_Load(object sender, EventArgs e) {  
        
              }  
        
              protected void btnHidden_Click(object sender, EventArgs e) {  
        
                System.Threading.Thread.Sleep(5000);  
        
                txtWebKit.Text = "Response Complete";  
        
              }  
        
            }

Xorcist

98 posts

Member since:
Apr 2009

Posted 31 Mar 2010 Link to this post

Note that if I add the following:
C#

    
              protected void Page_Load(object sender, EventArgs e) {  
        
                RadAjaxManager.RequestQueueSize = 5;  
        
              }

The page will queue and load for each extra request issued, increasing the time for the loading panel to disappear exponentially (but the panel will stay visible preventing users from interacting with the data being processed).

If instead I add the following:
ASPX

    
                      Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(canPostBack);  
        
                      function canPostBack(sender, args) {  
        
                        var prm = Sys.WebForms.PageRequestManager.getInstance();  
        
                        if (prm.get_isInAsyncPostBack()) {  
        
                          args.set_cancel(true);  
        
                        }  
        
                      }

I am limited to a single request at a time and the loading graphic stays up until the associated response is received (but I can't queue up seperate requests from other components on the page).

I'm not saying either of these are true solutions to the issue, but they are work arounds I encountered in attempts to solve it. The real meat of the matter is why are WebKit browsers issuing multiple requests, when IE and Firefox are not. If we can figure that out, we can get a real fix into place.

Iana Tsolova

Admin

3388 posts

Posted 06 Apr 2010 Link to this post

Hi Xorcist,

I was able to replicate the problem and will forward it to our developers for further investigation. However we might need a bit more time in order to find the source of the issue. Therefore I will write you back in this thread as soon as we have any progress on it.

Regards,
Iana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.