RadAjaxManager breaking JQuery

8 posts, 0 answers
  1. Duncan
    Duncan avatar
    93 posts
    Member since:
    Jul 2012

    Posted 07 Feb 2012 Link to this post

    Hi there..

    I'm a little new to JQuery, so i am not sure why this is happening and was hoping someone could enlighten me and maybe help me with the correct implementation.

    I have a JQuery script that repositions a div and the page is scrolled. I have it wrapped in a RadScriptBlock:

    <telerik:RadScriptBlock ID="radScriptBlock" runat="server">
            <script type="text/javascript">
                $(function () {
                    var offset = $("#<%= pnlMessageForm.ClientID %>").offset();
                    var topPadding = 15;
                    $(window).scroll(function () {
                        if ($(window).scrollTop() > offset.top) {
                            $("#<%= pnlMessageForm.ClientID %>").stop().animate({
                                marginTop: $(window).scrollTop() - offset.top + topPadding
                            });
                        } else {
                            $("#<%= pnlMessageForm.ClientID %>").stop().animate({
                                marginTop: 0
                            });
                        };
                    });
                });
            </script>
        </telerik:RadScriptBlock>

    The div that it is positioning is pnlMessageForm. It is wrapped inside another panel called pnlMessageOverlay. Onclick of a button i am doing the following updates:

    <telerik:RadAjaxManager ID="radAjaxManager" runat="server" DefaultLoadingPanelID="radAjaxLoadingPanel">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="btnSend">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="radScriptBlock" />
                    <telerik:AjaxUpdatedControl ControlID="pnlMessageOverlay" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    However the JQuery does not seem to work when partial page updates are introduced. It only seems to work when a full page postback is done... I am updating the RadScriptBlock, but this does not seem to fix it...

    How can i get this working so that i can use the RadAjaxManager

    Thanks,
    Duncan
  2. Duncan
    Duncan avatar
    93 posts
    Member since:
    Jul 2012

    Posted 09 Feb 2012 Link to this post

    Anyone?
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Antonio Stoilkov
    Admin
    Antonio Stoilkov avatar
    530 posts

    Posted 10 Feb 2012 Link to this post

    Hi Duncan,

    You could resolve your issue by following the steps below:
    • Remove the ajaxification of the radScriptBlock from the RadAjaxManager
    <telerik:RadAjaxManager ID="radAjaxManager" runat="server" DefaultLoadingPanelID="radAjaxLoadingPanel">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="btnSend">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="pnlMessageOverlay" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    • Include jQuery by adding ScriptReference in the RadScriptManager
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" >
       <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>
    • Wrap your JavaScript as it is shown below
    (function ($)
    {
        $(function ()
        {
            var offset = $("#<%= pnlMessageForm.ClientID %>").offset();
            var topPadding = 15;
            $(window).scroll(function ()
            {
                if ($(window).scrollTop() > offset.top)
                {
                    $("#<%= pnlMessageForm.ClientID %>").stop().animate({
                        marginTop: $(window).scrollTop() - offset.top + topPadding
                    });
                } else
                {
                    $("#<%= pnlMessageForm.ClientID %>").stop().animate({
                        marginTop: 0
                    });
                };
            });
        });
    })($telerik.$);

    Additionally, you could go through the help article below for more information how jQuery could be used with RadControls.

    All the best,
    Antonio Stoilkov
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  5. Duncan
    Duncan avatar
    93 posts
    Member since:
    Jul 2012

    Posted 10 Feb 2012 Link to this post

    Hi there Antonio.

    Other than the wrapping of the JQuery, I had all of your recommendations done already. I have wrapped the JQuery, still it does not work.

    My RadScriptManager is in a masterpage. Is this a issue at all?

    This is what i have thus far:

    In my master page:
    <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" />
            <asp:ScriptReference Path="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" />
            <asp:ScriptReference Path="~/App_Scripts/tagit/js/tagit.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        </Scripts>
    </telerik:RadScriptManager>

    On my page:
        <telerik:RadAjaxManager ID="radAjaxManager" runat="server" DefaultLoadingPanelID="radAjaxLoadingPanel">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="btnMessage">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="pnlMessageOverlay" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="loadingpanelFull" runat="server" Skin="" Transparency="30"
            CssClass="loading">
            <div class="full">
            </div>
        </telerik:RadAjaxLoadingPanel>
        <telerik:RadScriptBlock ID="radScriptBlock" runat="server">
            <script type="text/javascript">
                (function ($) {
                    $(function () {
                        var offset = $("#<%= pnlMessageForm.ClientID %>").offset();
                        var topPadding = 15;
                        $(window).scroll(function () {
                            if ($(window).scrollTop() > offset.top) {
                                $("#<%= pnlMessageForm.ClientID %>").stop().animate({
                                    marginTop: $(window).scrollTop() - offset.top + topPadding
                                });
                            } else {
                                $("#<%= pnlMessageForm.ClientID %>").stop().animate({
                                    marginTop: 0
                                });
                            };
                        });
                    });
                })($telerik.$);
            </script>
        </telerik:RadScriptBlock>
    ...

    And a little further down the page:
    <asp:Panel ID="pnlMessageOverlay" runat="server" Visible="false">
        <asp:Panel ID="pnlMessageForm" runat="server" CssClass="sample_data_popup">
            ...
        </asp:Panel>
    </asp:Panel>

    Do you see anything i might be doing wrong?

    Duncan
  6. Duncan
    Duncan avatar
    93 posts
    Member since:
    Jul 2012

    Posted 14 Feb 2012 Link to this post

    Nudge...
  7. Antonio Stoilkov
    Admin
    Antonio Stoilkov avatar
    530 posts

    Posted 15 Feb 2012 Link to this post

    Hello Duncan,

    I have assembled a sample project based on your code that works on my side. You could take a look at it and see if there are any differences at your end. Note that I have changed the pnlMessageOverlay Visibility because the control was not rendered on the page and not accessible through JavaScript.

    All the best,
    Antonio Stoilkov
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  8. Duncan
    Duncan avatar
    93 posts
    Member since:
    Jul 2012

    Posted 15 Feb 2012 Link to this post

    Antonio,

    That seems to be the issue. The fact that the panel is hidden. however, that is the whole purpose behind the panel... to hide and show. Could you perhaps advise me on a approach that would work?
  9. Antonio Stoilkov
    Admin
    Antonio Stoilkov avatar
    530 posts

    Posted 20 Feb 2012 Link to this post

    Hi Duncan,

    You could achieve your functionality by following one of the described approaches below:
    • Add additional condition checking if the offset is null which will mean the panel visibility property is set to false
    (function ($)
    {
        $(function ()
        {
            var offset = $("#<%= pnlMessageForm.ClientID %>").offset();
            var topPadding = 15;
            $(window).scroll(function ()
            {
                if (offset && $(window).scrollTop() > offset.top)
                {
                    $("#<%= pnlMessageForm.ClientID %>").stop().animate({
                        marginTop: $(window).scrollTop() - offset.top + topPadding
                    });
                } else
                {
                    $("#<%= pnlMessageForm.ClientID %>").stop().animate({
                        marginTop: 0
                    });
                };
            });
        });
    })($telerik.$);
    • Another possible solution is to set the panel CSS display property to none. This will cause the html element to render on the page but will not be visible
    <asp:Panel ID="pnlMessageOverlay" runat="server" Visible="true">
        <asp:Panel ID="pnlMessageForm" runat="server" CssClass="sample_data_popup">
        </asp:Panel>
    </asp:Panel>
    $("#ContentPlaceHolder1_pnlMessageForm").css("display", "none")

    All the best,
    Antonio Stoilkov
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017