jquery selector won't work on controls loaded with asp:UpdatePanel

Question

I have a legacy code that uses asp.net updatepanel to load some pagination items. basically it will have some text boxes and some text. i need to check whether any checkbox is selected on click of a button. The jquery code that i have works for the initial load but when the ajax load happens, the items loaded are no longer in the initial DOM so will not be considered for any jquery activities. we can use live or deligate for events but if i have to uses the control as a selector that won't help.

The code to check whether the checkbox is selected is strait forward but my concern is how do i rebind it after ajax call?

if ($('input:checked').length > 0) {
       alert('checked');
   }
   else {
          alert("not selected");
   }

Any ideas??

T.J. Crowder · Answer 1 · 2011-05-09T12:26:47.060

If you change the initial bind (or click or whatever, click is just a wrapper for bind) to either live or (better) delegate, they will survive updates to the underlying DOM elements.

Sadly the api.jquery.com site is having issues today, so those links won't be hyper-useful right now. Basically, though, if you have:

$("some_selector").click(function() { ... });

You can change it to

$("some_selector").live("click", function() { ... });

or (better)

$("some_parent_element_selector").delegate("selector_for_descendants", "click", function() { ... });

What happens there is that jQuery watches for the event on the parent element (or "body" in the case of live) and then checks to see whether the originating element matches the selector you gave. If so, it calls your handler as though it had been hooked on the actual element. Since the handler is on an ancestor element, not the actual descendant element, you can swap those out at will. This is sometimes called "event delegation" (hence the function delegate).

Example:

HTML:

<div id='container'>
  This is the container.
  <div class='foo'>
    This is the descendant of the container. Click me.
  </div>
</div>

JavaScript:

$("#container").delegate(".foo", "click", function() {
  $("<p>Element with class 'foo' clicked!</p>").appendTo(document.body);
});

Live copy

Thanks Crowder, that was a great explation... :) i was wondering how can we use delegates or live for using items that are generated using ajax as selectors... — Amit, May 10 '11 at 04:39

score 0 · Answer 2 · edited May 23 '17 at 12:19

0

jQuery $(document).ready and UpdatePanels?

edited May 23 '17 at 12:19

Community

1
1

answered May 09 '11 at 12:23

VikciaR

3,324
20
32

The accepted answer there is out of date. And flagging duplicates should be a *comment*, not an answer. – T.J. Crowder May 09 '11 at 12:27
Answer is correct - in jquery and update panel from that time nothing changes. – VikciaR May 09 '11 at 12:46
It's out of date, as jQuery has better event delegation features now than it had then. – T.J. Crowder May 09 '11 at 12:56

score 0 · Accepted Answer · answered May 12 '11 at 13:39

0

There is a solution on codeplex: http://updatepanelplugin.codeplex.com/discussions/70810

answered May 12 '11 at 13:39

Amit

25,106
25
75
116

jquery selector won't work on controls loaded with asp:UpdatePanel

3 Answers3