Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Ajax > RadAjaxManager breaking JQuery

• Duncan Intermediate

  Posted on Feb 7, 2012 (permalink)

  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
  

  Reply

• Duncan Intermediate

  Posted on Feb 9, 2012 (permalink)

  Anyone?

  Reply


• Antonio Stoilkov Antonio Stoilkov

  Posted on Feb 10, 2012 (permalink)

  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

  Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>

  Reply

• Duncan Intermediate

  Posted on Feb 10, 2012 (permalink)

  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

  Reply

• Duncan Intermediate

  Posted on Feb 14, 2012 (permalink)

  Nudge...

  Reply

• Antonio Stoilkov Antonio Stoilkov

  Posted on Feb 15, 2012 (permalink)

  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 >>

  Attached files

  • RadAjaxManagerBreakingJQueryContent.zip

  Reply

• Duncan Intermediate

  Posted on Feb 15, 2012 (permalink)

  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?

  Reply

• Antonio Stoilkov Antonio Stoilkov

  Posted on Feb 20, 2012 (permalink)

  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 >>

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Ajax > RadAjaxManager breaking JQuery