Button Click Fails (Sometimes)

[Rob]

I have an issue with a button I can't seem to wrap my head around. 19 out of 20 times the button works exactly as intended. I started hearing about it a few days ago after I added an icon to a series of buttons on the page but I have not been able to reproduce it (trying IE, Chrome, FF). Today I stood over the shoulder of an end user (In Chrome) and saw it happen. The button triggers a window to open so the user can mark a process complete or not. Once the process is marked complete a Postback is performed and the page reloads with new records to process and the user once again clicks the button, marks it complete, and so on and so on. As I said its working just as expected most of the time but then stops for some users. The strangest part to me is if the user just lets the page sit for some amount of time (10-15 minutes) and clicks the button again it works until the next time. I also observed that behavior looking over the shoulder of the user today. 

Here is the relevant lines of code. Any guesses what might be going on that I'm not seeing?

function MarkRecordComplete(sender, args) {

            var strURL = "CompleteRecord.aspx?" + $('#<%=hdRecord.ClientID%>').val();
            var oManager = GetRadWindowManager();
            var oWnd = oManager.getWindowByName("radMarkRecordComplete");
            oWnd.setUrl(strURL);
            oWnd.show();

            args.set_cancel(true);
            
 }

 <telerik:RadButton ID="radButtonMarkRecordComplete" runat="server" Text="Mark Record Complete" Icon-PrimaryIconUrl="~/images/check16.png" ToolTip="Click to Mark This Record Complete" CausesValidation="false" OnClientClicking="MarkRecordComplete" ButtonType="StandardButton" UseSubmitBehavior="false" Skin="Silk"></telerik:RadButton>

<telerik:RadWindowManager ID="RadWindowManager1" runat="server" Skin="Silk"  Modal="True" VisibleTitlebar="True" VisibleStatusbar="False" AnimationDuration="750" Opacity="75" RenderMode="Lightweight" Behaviors="Close, Move, Resize, Maximize, Minimize, Pin">
    <Windows>
     <telerik:RadWindow runat="server" id="radMarkRecordComplete" Height="350" Width="650" OnClientClose="OnMarkRecordCompleteClose"></telerik:RadWindow>
    </Windows>
</telerik:RadWindowManager>

[Rob]

I threw a try catch around MarkRecordComplete and an error bubbled up this morning when the button failed to open the Radwindo for a user. Here is the error (screen shot also attached): Sys.ArgumentOutOfRangeException: Value must be an integer. Parameter name: y Actual value was -0.39999999999999999....

Here is how I modified MarkRecordComplete to bubble up the error: 

function MarkRecordComplete(sender, args) {

try {
            var strURL = "CompleteRecord.aspx?" + $('#<%=hdRecord.ClientID%>').val();
            var oManager = GetRadWindowManager();
            var oWnd = oManager.getWindowByName("radMarkRecordComplete");
            oWnd.setUrl(strURL);
            oWnd.show();

            args.set_cancel(true);

}
        catch (err) {
            alert(err.message);
        }
            
 }

Any ideas? 

[Rob]

Oh btw....this appears to not actually be a matter of the button click failing as stated. Any way I can move this over to the Radwindow forum since that is likely where the issue is rooted? 

[Marin Bratanov]

Hello Rob,

I have answered your support ticket on the matter and I am pasting my answer here as well, in case someone else has a similar issue. If needed, we can continue the discussion in either thread and post the final findings here if you like.

---

We have had a couple of similar reports, yet we have not been able to reproduce the problem so far. The information and suggestions we have at the moment are listed below.

This seems like a problem Chrome 39 introduced (the sixth breaking change in a row they add since v34) - when the browser is zoomed, some properties and methods now return decimal numbers, while a lot of the constructors in the MS AJAX framework validate for integers. The most notable one is the Sys.UI.Point constructor which is the most likely reason for the problem. Thus, the question is who passed the decimal arguments and how to avoid them.

With this in mind, here are the ideas I can offer:

• If you are using a RadToolTip control on that page, examine this thread for details and workarounds: http://www.telerik.com/forums/sys-argumentoutofrangeexception-value-must-be-an-integer.
• If possible (e.g., if this is an intranet app), consider advising the end users to use the default zoom (100%).
• try setting the debug attribute of the compilation element in the web.config to false (we have had a client report this helped)
• try using a RadScriptManager instead of asp:ScriptManager (we have had a client report this helped)
• see if you are using one of the controls listed in this page that can be the cause for a similar problem: http://feedback.telerik.com/Project/108/Feedback/Details/144661-fix-system-formatexception-input-string-was-not-in-a-correct-format-thrown-o. It also offers several workarounds for them that can help.
• try adding the following script just before the closing </form> tag of the page where the RadWindow is declared. It attempts to round the values passed to the most common Sys.UI.Point constructor:
  

  if (document.documentElement.getBoundingClientRect) {
      $telerik.originalGetLocation = function (element) {
          var e = Function._validateParams(arguments, [
              { name: "element", domElement: true }
          ]);
          if (e) throw e;
          if (element.self || element.nodeType === 9 ||
              (element === document.documentElement) ||
              (element.parentNode === element.ownerDocument.documentElement)) {
              return new Sys.UI.Point(0, 0);
          }
  
          var clientRect = element.getBoundingClientRect();
          if (!clientRect) {
              return new Sys.UI.Point(0, 0);
          }
          var documentElement = element.ownerDocument.documentElement,
              offsetX = Math.round(clientRect.left) + documentElement.scrollLeft,
              offsetY = Math.round(clientRect.top) + documentElement.scrollTop;
          if (Sys.Browser.agent === Sys.Browser.InternetExplorer) {
              try {
                  var f = element.ownerDocument.parentWindow.frameElement || null;
                  if (f) {
                      var offset = (f.frameBorder === "0" || f.frameBorder === "no") ? 2 : 0;
                      offsetX += offset;
                      offsetY += offset;
                  }
              }
              catch (ex) {
              }
              if (Sys.Browser.version === 7 && !document.documentMode) {
                  var body = document.body,
                      rect = body.getBoundingClientRect(),
                      zoom = (rect.right - rect.left) / body.clientWidth;
                  zoom = Math.round(zoom * 100);
                  zoom = (zoom - zoom % 5) / 100;
                  if (!isNaN(zoom) && (zoom !== 1)) {
                      offsetX = Math.round(offsetX / zoom);
                      offsetY = Math.round(offsetY / zoom);
                  }
              }
              if ((document.documentMode || 0) < 8) {
                  offsetX -= documentElement.clientLeft;
                  offsetY -= documentElement.clientTop;
              }
          }
          offsetX = Math.round(offsetX);
          offsetY = Math.round(offsetY);
          return new Sys.UI.Point(offsetX, offsetY);
      };
  }

Regards,

Marin Bratanov
Telerik

 

 

[Rob]

For the sake of reference I have deployed the following two suggestions. I will report back for the benefit of anyone else once I have some feedback from the end users on if they are still seeing the issue or not. 

try using a RadScriptManager instead of asp:ScriptManager (we have had a client report this helped)

try adding the following script just before the closing </form> tag of the page where the RadWindow is declared. It attempts to round the values passed to the most common Sys.UI.Point constructor:

[Rob]

I have a weird thing going on with the if (document.documentElement.getBoundingClientRect)..... script you had me place on my page. I dropped the script on the 2 master pages used in my project. One master page is used for the main content and the other is only for content opened in a RadWindows or tab level content. The reason I placed it in both is both mater pages may declare Radwindows (where I might have a Radwindow open another Radwindow, or a tab open a another Radwindow). One of those pages is opened in a RadWindow from 2 different base pages. In one of those pages everything works perfectly, on the other I'm getting a Javascript error with the script you had me add. 

Here is the error: JavaScript runtime error: '$telerik' is undefined

To say it a different way, why would I get the Javascript error when I open the page from one location and not another? Same exact static content in both cases. I "fixed" it by throwing a try catch around the "$telerik.originalGetLocation = function (element) {" bit in the script which suppresses the error in the one case and seemingly has not adverse effect as everything appears to be functioning as expected. 

As a side note there wasn't a ton of activity today after I rolled the fixes in for the original rounding error but there is one particular user who seemed to be getting the error that didn't have the error after I rolled the fix for remainder of the day. I'm not ready to call if solved but that is encouraging.  

[Marin Bratanov]

Hello Rob,

It does sound encouraging and I will appreciate it if you keep us updated with any information you have on the matter.

As for the error - the most likely reason is that something is different on those pages and on the problematic page, no control of ours is present intially so that it will fetch the $telerik core scripts, so you can do something like this:

if($telerik) {
    //add the override here
}

Probably the RadWindow instnace that can be used there is added programmatically on demand, so it is no always present on the page.

Another thing you can do is to try adding a script reference to that page's ScriptManager so our core scripts always arrive:

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

Regards,

Marin Bratanov
Telerik

 

 

[Rob]

Thanks Marin. What you said makes sense and adding the script reference to the ScriptManager corrected that issue for me. As far as the original issue that also appears to be corrected. We've had a full day of work with zero reports of the issue happening. I can't say if it was using the RadScriptManager in place of the asp:ScriptManager or adding the script you provided but one or the combination seems to have done the trick. Much appreciated.