Click here to Skip to main content
13,249,813 members (68,136 online)
Click here to Skip to main content
Add your own
alternative version


18 bookmarked
Posted 28 Jan 2013

ASP.NET – jQuery is not Working in UpdatePanels

, 28 Jan 2013
Rate this:
Please Sign up or sign in to vote.
When using JavaScript or jQuery in UpdatePanel enabled web page, everything will work fine at the first page load, but after any asynchronous post back happens by UpdatePanel, all JavaScript and jQuery effects will vanish.



ASP.NET UpdatePanel control allows to build rich, client-centric Web applications. UpdatePanel controls refresh only selected part of the page instead of refreshing the whole page with a post back. In another words this is performing a partial-page update. A Web page that contains a ScriptManager control and one or more UpdatePanel controls can automatically participate in partial-page updates, without custom client script.

When using JavaScript or jQuery in UpdatePanel enabled web page, everything will work fine at the first page load, but after any asynchronous post back happens by UpdatePanel, all JavaScript and jQuery effects will vanish.

Why is this happening?

Because, 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.

What is the solutions?

There are a couple of ways to fix this. In this article, IMO the easiest solution for this problem is to use Sys.Application inside UpdatePanel to call JavaScript, jQuery functions after each Asynchronous post back event.


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:

<script type="text/javascript">
    // JavaScript funciton to call inside UpdatePanel
    function jScript() {
        $("#click").click(function () {
            alert("Clicked Me!");

ASP.NET UpdatePanel with JavaScript/jQuery re-call function:

<%-- Script Manager for ASP.NET AJAx --%>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    <%-- // Script Manager End --%>
    <%--ASP.NET UpdatePanel control to refresh page withtout post back--%>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <%-- Contetn template to put all ASP.NET controls for AJAX --%>
        <%-- Re-Calling JavaScirpt/jQuery function on each Asynchronous post back. --%>
            <script type="text/javascript" language="javascript">
            <%-- // Re-Calling function End --%>
            <%-- ASP.NET button for post back --%>
            <asp:Button ID="btnPostBack" runat="server" 

               OnClick="btnPostBack_Click" Text="Click To Postback" />
            <%-- // ASP.NET button End --%>
            <%-- Link for showing the message on its click event --%>
            <a href"#" id="click">Click Me!</a>
            <%-- // Link End --%>
        <%-- // Contetn template End --%>
    <%-- // ASP.NET UpdatePanel End --%>

ASP.NET (C#) code for button:

protected void btnPostBack_Click(object sender, EventArgs e)
    btnPostBack.Text = "UpdatePanel PostBack Happened";


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

Feel free to comment, suggest or give your feedback.

The post jQuery $(document).ready is not Working in UpdatePanels – ASP.NET appeared first on Noor Ahmad Feroozi's Blog.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Noor Ahmad Feroozi
Software Developer (Senior) Ministry of Education
Afghanistan Afghanistan
No Biography provided

You may also be interested in...

Comments and Discussions

QuestionHow to call jquery in code behind Pin
Ashish Kashyap20-Apr-15 23:39
memberAshish Kashyap20-Apr-15 23:39 
QuestionVote 5 Pin
thanghaui6622-Sep-14 18:49
memberthanghaui6622-Sep-14 18:49 
QuestionGreat Post Pin
Yahya Mohammed Ammouri3-Aug-14 5:18
memberYahya Mohammed Ammouri3-Aug-14 5:18 
GeneralMy vote of 5 Pin
rahulmestri9-Jul-13 23:51
memberrahulmestri9-Jul-13 23:51 
QuestionIts really nice solution Pin
Ahmad Khan18-Jun-13 7:35
memberAhmad Khan18-Jun-13 7:35 
SuggestionTry this Pin
BaxterBoom22-Feb-13 22:24
memberBaxterBoom22-Feb-13 22:24 
GeneralMy vote of 3 Pin
damian-piatkowski31-Jan-13 10:43
memberdamian-piatkowski31-Jan-13 10:43 
Questiona better way to deal with events Pin
Robert Pfeffer29-Jan-13 11:00
memberRobert Pfeffer29-Jan-13 11:00 
AnswerRe: a better way to deal with events Pin
oliver_29-Jan-13 23:26
memberoliver_29-Jan-13 23:26 
I'll allow to elaborate a bit on Robert's answer since it's really very valuable but some might not grasp that at once.

jQuery added the functionality to bind event handlers to elements that don't exist on the page at the moment of initialization quite some time ago with the .live() function. Since jQuery 1.7 you should use .on() instead in the following fashion:
<script type="text/javascript">
    // JavaScript function to hook up to #click elements
    function jScript() {
        $('body').on('click', '#click' (function () {
            alert('Clicked Me!');

The above code block has the following semantics: attach a click event handler to the body element but execute it only if the event was triggered by an element of id click (as defined by #click). The great thing about this is that it does not matter when that trigger element appears in the DOM tree!

The whole documentation of jQuery's .on() function has a bunch of useful information but the most important part for this example would be: Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. And this is what we are using here - delegated events.
Questiondetail Pin
thewazz29-Jan-13 9:05
memberthewazz29-Jan-13 9:05 
QuestionBenefits over "get_isPartialLoad" solution Pin
pmaree29-Jan-13 3:45
memberpmaree29-Jan-13 3:45 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.171114.1 | Last Updated 28 Jan 2013
Article Copyright 2013 by Noor Ahmad Feroozi
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid