Page Jumps In Chrome

5 posts, 0 answers
  1. CDK
    CDK avatar
    7 posts
    Member since:
    Feb 2013

    Posted 21 Apr 2015 Link to this post

    Hello,

    I'm using a RadAjaxManager to perform an async request to the code behind. With Chrome, the page jumps to the top and then returns to the original scroll location. I'm kicking off the request via the change event of a Kendo UI DatePicker. The event calls the ajaxRequestWithTarget js function from the RadAjaxManager. Sometimes is takes 1 or 2 calendar date changes for this behavior to start. This behavior only happens with Chrome (42.0.2311.90 m). Below is an example.

    Browser: Chrome (42.0.2311.90 m)

    Dev Environment: Visual Studio 2013

    Telerik Version: UI for ASP.NET AJAX Q1 2015

     

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="RadAjaxManagerIssue.Test" %><br><!DOCTYPE html><br><br><html xmlns="http://www.w3.org/1999/xhtml"><br>    <br><head runat="server"><br>    <title></title><br>    <script src="//code.jquery.com/jquery-1.9.1.min.js"></script><br>    <script src="http://cdn.kendostatic.com/2015.1.318/js/kendo.ui.core.min.js"></script><br>    <link href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.common.min.css" rel="stylesheet" type="text/css" /><br>    <link href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.default.min.css" rel="stylesheet" type="text/css"/><br></head><br><br><body>    <br>    <form id="form1" runat="server"><br>              <br>        <div><br>            <telerik:RadScriptManager   ID="rsm" runat="server"> </telerik:RadScriptManager><br>        <br>            <div style="padding-top: 1500px;"><br>                <input id="txtMonth" runat="server" /><br>                <asp:CustomValidator ID="valMonthPicker" ControlToValidate="txtMonth" ClientValidationFunction="IsValidDate" Text="*" runat="server"><br>                </asp:CustomValidator><br>                <input id="txtUpdatedControl" runat="server" />   <br>            </div><br>        </div><br>        <br>        <telerik:RadAjaxManager ID="ram" runat="server"><br>            <AjaxSettings><br>                <telerik:AjaxSetting AjaxControlID="txtMonth"><br>                    <UpdatedControls><br>                        <telerik:AjaxUpdatedControl ControlID="txtUpdatedControl" /><br>                    </UpdatedControls><br>                </telerik:AjaxSetting><br>            </AjaxSettings><br>        </telerik:RadAjaxManager><br>        <br>        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"><br>            <script type="text/javascript">              <br>                function InitiateAsyncRequest() {<br>                    $find('ram').ajaxRequestWithTarget('txtMonth', '');<br>                    return false;<br>                }<br><br>                function IsValidDate(source, args) {<br>                    var datePicker = $('#txtMonth').data('kendoDatePicker');<br>                    var date = datePicker.value();<br>                    var format = datePicker.format;<br>                    args.IsValid = kendo.parseDate(date, format);<br>                }<br><br>                $('#txtMonth').kendoDatePicker({<br>                    start: 'year',<br>                    depth: 'year',<br>                    format: 'MM/yyyy',<br>                    change: InitiateAsyncRequest<br>                });<br>            </script><br>        </telerik:RadCodeBlock><br>    </form><br></body><br></html>

  2. CDK
    CDK avatar
    7 posts
    Member since:
    Feb 2013

    Posted 21 Apr 2015 Link to this post

    This might be a little easier to look at...

     

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="RadAjaxManagerIssue.Test" %>

    <!DOCTYPE html>

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

    <head runat="server">
        <title></title>
        <script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://cdn.kendostatic.com/2015.1.318/js/kendo.ui.core.min.js"></script>
        <link href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
        <link href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.default.min.css" rel="stylesheet" type="text/css"/>
    </head>

    <body>    
        <form id="form1" runat="server">

            <div>
                <telerik:RadScriptManager   ID="rsm" runat="server"> </telerik:RadScriptManager>

                <div style="padding-top: 1500px;">
                    <input id="txtMonth" runat="server" />
                    <asp:CustomValidator ID="valMonthPicker" ControlToValidate="txtMonth" ClientValidationFunction="IsValidDate" Text="*" runat="server">
                    </asp:CustomValidator>
                    <input id="txtUpdatedControl" runat="server" />   
                </div>
            </div>

            <telerik:RadAjaxManager ID="ram" runat="server">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="txtMonth">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="txtUpdatedControl" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>

            <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
                <script type="text/javascript">              
                    function InitiateAsyncRequest() {
                        $find('ram').ajaxRequestWithTarget('txtMonth', '');
                        return false;
                    }

                    function IsValidDate(source, args) {
                        var datePicker = $('#txtMonth').data('kendoDatePicker');
                        var date = datePicker.value();
                        var format = datePicker.format;
                        args.IsValid = kendo.parseDate(date, format);
                    }

                    $('#txtMonth').kendoDatePicker({
                        start: 'year',
                        depth: 'year',
                        format: 'MM/yyyy',
                        change: InitiateAsyncRequest
                    });
                </script>
            </telerik:RadCodeBlock>
        </form>
    </body>
    </html>

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 24 Apr 2015 Link to this post

    Hello Chris,

    I would suggest you to try ajaxify the controls by wrapping the with RadAjaxPanel control instead of using RadAjaxManager. Give this a try and see how it goes.
    Also I would suggest you to inspect the response using the browser's console when the described issue appears and verify if any js errors pop up on the page

    Regards,
    Maria Ilieva
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  5. CDK
    CDK avatar
    7 posts
    Member since:
    Feb 2013

    Posted 27 Apr 2015 in reply to Maria Ilieva Link to this post

    I swapped out the RadAjaxManager with the RadAjaxPanel and the behavior is still there. There are no javascript errors. This problem only exists in Chrome (not sure about Safari). The request works, but it puts the scroll position to top of the page for the duration of the request.
  6. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1793 posts

    Posted 30 Apr 2015 Link to this post

    Hello Chris,

    There seems to be a conflict with one of the Kendo elements, which is causing the scrolling issue. 

    However, if you wrap the calling of the ajaxRequestWithTarget method within a setTimeout function, the issue will resolved:
    function InitiateAsyncRequest() {
        setTimeout(function () {
            $find('ram').ajaxRequestWithTarget('txtMonth', '');   
        })
         
        return false;
    }

    Please give this a try and see if it works correctly on your end too.


    Regards,
    Konstantin Dikov
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017