jquery ".toggle()" not working inside radwindow

4 posts, 1 answers
  1. sf
    sf avatar
    103 posts
    Member since:
    Apr 2009

    Posted 09 Jun 2013 Link to this post

    in my radwindow I have <a class="toggler" > + </a> which has a piece of javascript attached: 
    $(document).ready(function() {

                $('.toggler').click(function() {
                    $(this).next('.tobetoggled').toggle(400);
                    $(this).text($(this).text() == '+' ? '-' : '+');
                    return false;
                });
            });

    This jquery is used to toggle the visibility of a div:
    <div class="tobetoggled" > test div </div>


    exactly same setup works on a normal .aspx page, but not on this radwindow. The radwindow is very simple, got nothing but the anchor and the div described above

    any idea what I am doing wrong?
    thanks in adavnce
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 10 Jun 2013 Link to this post

    Hi,

    To toggle the visibility of a div via jquery please try the following code snippet.
    JS:
    (function ($) {
       $(document).ready(function () {
       $('.toggler').click(function () {
         $('.tobetoggled').toggle();  
          });
       });
    })($telerik.$);

    Note: Take a look into this documentation to use jquery in telerik.

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. sf
    sf avatar
    103 posts
    Member since:
    Apr 2009

    Posted 11 Jun 2013 Link to this post

    hi Shinu thanks for your help. I had to wrap the suggest code inside radscriptblock to get it work.

    However it only works when the page is first loaded. It stops working after a postback on the page.

    the controls are all inside a RadAjaxPanel, it must be the cause? any idea?
  5. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 12 Jun 2013 Link to this post

    Hi,

    I have tried the same inside RadAjaxPanel and it worked as expected. Here is my full code.
    ASPX:
    <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
      <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
       <script type="text/javascript">
         (function ($) {
            $(document).ready(function () {
            $('.toggler').click(function () {
           $('.tobetoggled').toggle();
              });
         });
      })($telerik.$);
       </script>
      </telerik:RadScriptBlock>
     <telerik:RadWindowManager ID="RadWindowManager1" runat="server">
     <Windows>
       <telerik:RadWindow ID="radwindow" runat="server" VisibleOnPageLoad="true">
         <ContentTemplate>
         <a id="toggler" class="toggler" style="text-decoration: underline; color: Blue">Click to Hide</a>
        <div id="testdiv" class="tobetoggled">
        Hide Me</div>
        </ContentTemplate>
      </telerik:RadWindow>
     </Windows>
     </telerik:RadWindowManager>
    </telerik:RadAjaxPanel>

    Thanks,
    Shinu.
Back to Top