jQuery $(document).ready and UpdatePanels?
Solution 1
An UpdatePanel completely replaces the contents of the update panel on an update. This means that those events you subscribed to are no longer subscribed because there are new elements in that update panel.
What I've done to work around this is re-subscribe to the events I need after every update. I use $(document).ready()
for the initial load, then use Microsoft's PageRequestManager
(available if you have an update panel on your page) to re-subscribe every update.
$(document).ready(function() {
// bind your jQuery events here initially
});
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function() {
// re-bind your jQuery events here
});
The PageRequestManager
is a javascript object which is automatically available if an update panel is on the page. You shouldn't need to do anything other than the code above in order to use it as long as the UpdatePanel is on the page.
If you need more detailed control, this event passes arguments similar to how .NET events are passed arguments (sender, eventArgs)
so you can see what raised the event and only re-bind if needed.
Here is the latest version of the documentation from Microsoft: msdn.microsoft.com/.../bb383810.aspx
A better option you may have, depending on your needs, is to use jQuery's .on()
. These method are more efficient than re-subscribing to DOM elements on every update. Read all of the documentation before you use this approach however, since it may or may not meet your needs. There are a lot of jQuery plugins that would be unreasonable to refactor to use .delegate()
or .on()
, so in those cases, you're better off re-subscribing.
Solution 2
<script type="text/javascript">
function BindEvents() {
$(document).ready(function() {
$(".tr-base").mouseover(function() {
$(this).toggleClass("trHover");
}).mouseout(function() {
$(this).removeClass("trHover");
});
}
</script>
The area which is going to be updated.
<asp:UpdatePanel...
<ContentTemplate
<script type="text/javascript">
Sys.Application.add_load(BindEvents);
</script>
*// Staff*
</ContentTemplate>
</asp:UpdatePanel>
Solution 3
User Control with jQuery Inside an UpdatePanel
This isn't a direct answer to the question, but I did put this solution together by reading the answers that I found here, and I thought someone might find it useful.
I was trying to use a jQuery textarea limiter inside of a User Control. This was tricky, because the User Control runs inside of an UpdatePanel, and it was losing its bindings on callback.
If this was just a page, the answers here would have applied directly. However, User Controls do not have direct access to the head tag, nor did they have direct access to the UpdatePanel as some of the answers assume.
I ended up putting this script block right into the top of my User Control's markup. For the initial bind, it uses $(document).ready, and then it uses prm.add_endRequest from there:
<script type="text/javascript">
function BindControlEvents() {
//jQuery is wrapped in BindEvents function so it can be re-bound after each callback.
//Your code would replace the following line:
$('#<%= TextProtocolDrugInstructions.ClientID %>').limit('100', '#charsLeft_Instructions');
}
//Initial bind
$(document).ready(function () {
BindControlEvents();
});
//Re-bind for callbacks
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function() {
BindControlEvents();
});
</script>
So... Just thought someone might like to know that this works.
Solution 4
Upgrade to jQuery 1.3 and use:
$(function() {
$('div._Foo').live("mouseover", function(e) {
// Do something exciting
});
});
Note: live works with most events, but not all. There is a complete list in the documentation.
Solution 5
You could also try:
<asp:UpdatePanel runat="server" ID="myUpdatePanel">
<ContentTemplate>
<script type="text/javascript" language="javascript">
function pageLoad() {
$('div._Foo').bind("mouseover", function(e) {
// Do something exciting
});
}
</script>
</ContentTemplate>
</asp:UpdatePanel>
,since pageLoad() is an ASP.NET ajax event which is executed each time the page is loaded at client side.
Herb Caudill
Herb is the founder and CTO of DevResults, a web app for managing foreign aid projects. DevResults is intended to make international development, grant-making, humanitarian assistance, and disaster relief programs more effective. It includes tools for monitoring & evaluation, mapping, project management, and collaboration.
Updated on July 08, 2022Comments
-
Herb Caudill almost 2 years
I'm using jQuery to wire up some mouseover effects on elements that are inside an UpdatePanel. The events are bound in
$(document).ready
. For example:$(function() { $('div._Foo').bind("mouseover", function(e) { // Do something exciting }); });
Of course, this works fine the first time the page is loaded, but when the UpdatePanel does a partial page update, it's not run and the mouseover effects don't work any more inside the UpdatePanel.
What's the recommended approach for wiring stuff up in jQuery not only on the first page load, but every time an UpdatePanel fires a partial page update? Should I be using the ASP.NET ajax lifecycle instead of
$(document).ready
? -
Tim Scarborough almost 15 yearsUsing live fixes the issue with update panels. No hoops needed to jump through.
-
Adam Youngers over 12 yearsWhat about something that needs to happen on pageload? For example zebra striping tables? $('TABLE TR:nth-child(odd)').addClass('alt-row');
-
Adam Youngers over 12 yearsI couldn't get this to work for the life of me. Then I moved it from the head to the footer and it worked. Not positive, but I think it needed to come after the ScriptManager I am using.
-
Gabriele Petrioli over 12 years@Dan, As of jQuery 1.7,
.delegate()
has been superseded by the.on()
-
Dan Herbert over 12 years@GabyakaG.Petrioli I realize it has been superseded, but since this answer seems to solve a common problem I wanted to maximize compatibility with older versions of jQuery that haven't been upgraded yet. My answer previously recommended
.live(...)
which has been officially deprecated in 1.7 and may be removed in a future version. I intentionally chose.delegate()
since it has been supported in jQuery for a while now and is not likely to be removed any time soon. However, I'll upgrade my answer to mention.on()
as well for those who can use it. -
Damarawy over 12 yearsIn my case I was adding the script using ScriptManager.RegisterClientScriptBlock which adds the script before Sys is defined, so I ended up using RegisterStartupScript instead (see difference here)
-
Drakarah about 12 yearsIt's better to declare and wire up the prm var inside the $(document).ready, as it's possible the Sys has not been declared yet (depending on where the script is).
-
Zo Has over 11 yearspageLoad duplicate the events on every ASync postback of Update Panel.
-
George over 11 yearsJust to update, since jQuery 1.7 it is now recommended to use .on() instead
-
Dan Herbert over 11 years@AhmedSamy It is not recommended to use
jQuery.delegate()
any more. It has been superseded byjQuery.on()
which is the preferred API to use.delegate()
is simply a wrapper for a specific use ofon()
, and it's possible that it may become deprecated in the future. My previous comment mentioningdelegate()
was written over a year ago when jQuery 1.7 (which introduced theon()
API) was newly released. With jQuery 1.9 already out and 2.0 in beta being prepared for release, it is a good idea to avoid usingdelegate()
in any new code. -
timmi4sa almost 11 yearsJust found a serious failure while using the
live()
method in IE7 (jQuery 1.5.1 / VS2010 project). When usinglive()
inside an UpdatePanel in v3.5 ASP.NET a regularAutoPostback
of<asp:DropDownList />
causes 2 partial postbacks as opposed to the expected 1. The extra postback issued by the browser lacks the content (aborted) causing thePage.IsPostBack
to befalse
(which kills state inside my bound controls). I found the culprit to be live() method. I realize that 1st postback to be aborted by UpdatePanel per spec but only if there's another one in the queue of which there isn't. -
Steve Greene over 7 yearsYes, check for isPartialLoad as well: stackoverflow.com/questions/301473/…
-
Dan Randolph over 7 yearsWorks well for asp:GridView TextBox inside <EditItemTemplate>
-
Kiran Ramaswamy over 6 yearsAn old post, but one which helped me out. One thing which I would like to add to this: the location of the add_endRequest code has to be inside the UpdatePanel, as the Sys.WebForms.PageRequestManager is only available at that point. However, the actual function does not need to be in that location. So, in my case, I have a script.js file which contains the code I want bound, contained within a function. In that script.js file, I have a document.ready call, which invokes the above function. Then, in my UpdatePanel, I have the add_endRequest code, which also invokes the above function.
-
Resource about 6 yearsPerfect for resizing the textareas in my Listview in my UpdatePanel in my UserControl according to amount of text.
-
MC9000 over 5 yearsThe problem with this solution, is that, while it works, it kills the UpdatePanel's asynchronous post back - making the UpdatePanel useless once again. (sigh)
-
MC9000 over 5 yearsThis works, but the UpdatePanel no longer does partial page updates after implementing. I tried this with the Select2 bootstrap dropdown (and the bootstrap-select as well) and this defeats asynch (works fine on regular dropdownlist with no formatting or initialization - but desire a nice looking dropdown). The only solution was to ditch the updatepanel altogether and just use jquery ajax instead (MS just doesn't have a clue).
-
moto_geek almost 4 yearsI struggled to make dom jquery functions work correctly on postback with update panels, this solution worked and I didn't have to duplicate my function calls in 2 scenarios. This kept the jquery functions and listener available. Note I put all my script and jquery library includes right before the FORM [end] tag at the bottom of the page. Thanks!!!