8

How can I rebind my events (jquery) when I perform a partial page postback?

I am wiring everything up using:

$(document).ready(function(){};

After a partial page postback, my events are not firing.

Blankman
  • 259,732
  • 324
  • 769
  • 1,199

5 Answers5

10

You can either tap into the PageRequestManager endRequestEvent:

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function(){});

Or if it is control events you're trying to attach, you can use jQuery live events.

Another option is to do the event delegation manually. It is what the "live" event are doing under the covers. Attach the event handler to the document itself, then conditionally execute your method if the sender of the event was element you expect.

$(document).click(function(e){  
    if($(e.target).is(".collapseButton")){  
        $(this).find(".collapsePanel").slideToggle(500);  
    }  
})
Mark
  • 9,966
  • 7
  • 37
  • 39
  • thanks that worked, guess it is not as effecient but its only for this one page. – Blankman Apr 17 '09 at 15:47
  • It is actually very efficient. If you have event handlers on every row of a grid, this will have only one event handler for the entire grid. It gets even better if you have several event handlers for each row. You can get by with only one....and nothing to attach to new records created manually or via partial postbacks. – Mark Apr 17 '09 at 15:50
6

I'm guessing from 'partial page postback' you're working in Asp.net land.

Try using 

Sys.Application.add_load(function() { });

You should still be able to use all the normal jQuery stuff inside that func.

Vishal Suthar
  • 17,013
  • 3
  • 59
  • 105
ecoffey
  • 3,423
  • 4
  • 23
  • 22
  • Exactly. That's exactly why MS invented that load event: they knew they'd be blowing away DOM elements after partial postbacks, and they needed to give devs a single way to do stuff when the page is ready, regardless of whether fancy AJAX UpdatePanels are used or not. – JPot Apr 17 '09 at 19:09
  • Perfect. This did the trick. Just called my same setup methods directly and via this event and it now works perfectly. Cheers! – iCollect.it Ltd Jul 19 '12 at 13:36
2

Check out the "live" feature of jQuery 1.3 here. You can add events to future elements as well as current elements on the page. This may simplify the code you'll need to write.

Brandon Montgomery
  • 6,924
  • 3
  • 48
  • 71
  • we are not using 1.3 so cnt' use live. – Blankman Apr 17 '09 at 15:32
  • 1
    We use "live" events a lot, but sometimes they don't meet out needs. If you're using jQuery to manipulate the DOM, you'll need to re-manipulate it after it's been updated via the partial postback. – Mark Apr 17 '09 at 15:34
  • 1
    You can achieve the same effect of live by doing the event delegation manually. – Mark Apr 17 '09 at 15:35
  • I remember attempting to use that, but it doesn't fully work for IE, and breaks some of it. – ecoffey Apr 17 '09 at 15:40
  • Thanks all - good to know. I've never actually tried to use it, I just knew it was something that was new in jQuery 1.3. – Brandon Montgomery Apr 17 '09 at 17:28
1

The most elegant solution (using jQuery 2.x) is this:

Use the "on" event. Make sure you bind the event to the document and not to the element itself!

Code example:

$(document).on('click', 'div.messages', function () {
    console.log('click on div.messages');
    return false;
});

Put this code into document.ready for example.

This works even if div.messages is changed or created inside an UpdatePanel. And it is never fired twice or more times at once.

Tillito
  • 7,718
  • 7
  • 34
  • 31
0

Some DOM elements are replaced when you do a partial postback, and of course, the new elements will loose jQuery bindings. You can use the ScriptManager class to register a script that will be executed after the partial postback finishes (have a look here)

Community
  • 1
  • 1
ybo
  • 16,967
  • 2
  • 28
  • 31