locked
Need Help ...Jquery function is not working in update panel RRS feed

  • Question

  • User-1571110992 posted
    Hi all,
    
    I have update panel on my page with button control. when I am doing postback using button to populate two
    different lable which is in div and P. I wrote Jquery code to toggle hide and show. Before post back the
    toggle  functionlity using Jquery is working  fine but after post back it is not. Please suggest me some solution.
    
    
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
     <ContentTemplate>
        <div class="layer1">
     
    <p class="heading"><asp:Label Id= "lblContentOne2" runat="server" /></p>
    <div class="content"><asp:Label Id= "lblContentDescription2" runat="server" /></div>
    <p class="heading"><asp:Label Id= "lblContentOne3" runat="server" /></p>
    <div class="content"><asp:Label Id= "lblContentDescription3" runat="server" /></div>
    
    </div>
      <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
    
    </ContentTemplate>
      </asp:UpdatePanel>
    Button Code
    
      protected void Button1_Click(object sender, EventArgs e)
            {
                string str = "<span style='color:rgb(0,0,255);font-weight:bold;'> About Air pollution &nbsp&nbsp&nbsp&nbsp</span><br > this is content tesxtccccccccc <br>";
                int ina = str.IndexOf("</span>");
                string stree = str.Substring(0, ina + 7);
                string ss1 = str.Substring(ina + 7);
    
                lblContentOne.Text =  stree.ToString();
                lblContentDescription.Text = ss1.ToString();
               
            }
    Jquery Code:
    
    <script type="text/javascript">
            jQuery(document).ready(function () {
                jQuery(".content").hide();
                //toggle the componenet with class msg_body
                jQuery(".heading").click(function () {
                    jQuery(this).next(".content").slideToggle(500);
                });
            });



    Friday, March 22, 2013 8:25 PM

Answers

  • User-1571110992 posted
     function pageLoad(sender, args) {
    
                // binding code here, for example
                jQuery(".content").hide();
                //toggle the componenet with class msg_body
                jQuery(".heading").click(function () {
                    jQuery(this).next(".content").slideToggle(500);
                });
            }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, March 22, 2013 8:50 PM

All replies

  • User-1571110992 posted
     function pageLoad(sender, args) {
    
                // binding code here, for example
                jQuery(".content").hide();
                //toggle the componenet with class msg_body
                jQuery(".heading").click(function () {
                    jQuery(this).next(".content").slideToggle(500);
                });
            }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, March 22, 2013 8:50 PM
  • User-489377026 posted

    Hi vishabedre,

    Thank you very much for sharing your solution here, if you have any issue in future programming, you're welcome to post it here.

    Best Regards

    Sunday, March 24, 2013 9:40 PM
  • User-28043379 posted

    Dear Vishabedre,

    I have the same issue, but the above code is not working.

    Actually, We need to integrate the ShowMore, TreeMenu features on the CustomControl(ASCX) page.

    This page(web site) is written by 3rd party so we dont have the code with us.

    We just have a ASCX file, where we need to add our TreeMenu to it.

    but the javascript/jQuery calls are not working on this page.

    only inline javascript codes are only working.

    So can you please help me to fix this issue? 

    (PS: we were able to add the same menu on the another ASCX page, which is not a part of the UpdatePanel)

    Thursday, May 23, 2013 6:55 AM