Post
Ask Question

JQuery Is Not Working In UpdatePanels

When the UpdatePanel post back triggers, the existing markup will overwrite with the markup generated by UpdatePanel on the post back, which destroys all event handlers from HTML elements in the UpdatePanel.

In example below, I used an asp button for post back event and jQuery to show a message when Click Me! link is clicked.

JavaScript/jQuery function

  1. <script type="text/javascript">  
  2.     // JavaScript funciton to call inside UpdatePanel  
  3.     function calldemo() {  
  4.         $("#click").click(function() {  
  5.             alert("Clicked Me!");  
  6.         });  
  7.     }  
  8. </script>  
ASP.NET UpdatePanel with JavaScript/jQuery re-call function,
  1. <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager>  
  2. <asp:UpdatePanel ID="UpdatePanel1" runat="server">  
  3.     <contenttemplate>  
  4.         <!--Re-Calling JavaScirpt/jQuery function on each Asynchronous post back.-->  
  5.         <script type="text/javascript" language="javascript">  
  6.             Sys.Application.add_load(calldemo);  
  7.         </script>  
  8.         <asp:Button ID="btnPostBack" runat="server" OnClick="btnPostBack_Click" Text="Click To Postback" /> <a href "#" id="click">Click Me!</a> </contenttemplate>  
  9. </asp:UpdatePanel>  
ASP.NET (C#) code for button,
  1. protected void btnPostBack_Click(object sender, EventArgs e)   
  2. {  
  3.     btnPostBack.Text = "UpdatePanel PostBack Happened";  
  4. }  
Conclusion

After calling JavaScript/jQuery functions inside UpdatePanel using Sys.Applicaiton.add_load() event handler, you will be able to solve the problem.