This is a migrated thread and some comments may be shown as answers.

WebKit Brower Issues (Ajax Related)

2 Answers 128 Views

Input

This is a migrated thread and some comments may be shown as answers.

Xorcist asked on 31 Mar 2010, 05:49 PM

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";  
        
              }  
        
            }

2 Answers, 1 is accepted

answered on 31 Mar 2010, 09:08 PM

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.