RadAjaxManager breaking JQuery

[Duncan]

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

[Duncan]

Anyone?

[Antonio Stoilkov]

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.

• Using jQuery

All the best,
Antonio Stoilkov
the Telerik team

[Duncan]

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

[Duncan]

Nudge...

[Antonio Stoilkov]

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

[Duncan]

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?

[Antonio Stoilkov]

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