Rebinding events in jQuery after Ajax update (updatepanel)

Question

I have several input and option elements on my page, each (well almost) have an event attached to update some text on the page once they change. I use jQuery which is really really cool :)

I also use Microsofts Ajax framework, utilizing the UpdatePanel. The reason why I do that is that certain elements are created on the page based on some server-side logic. I don't really want to explain why I use the UpdatePanel - even if it could (it can with quite some effort) be rewritten to use only jQuery I still want that UpdatePanel.

You probably guessed it - once I have a postback on the UpdatePanel the jQuery events stops working. I actually was expecting this, since the "postback" is not really a new postback so my code in document.ready that binds the events won't be fired again. I also confirmed my suspicion by reading up on it in the jQuery help libraries.

Anyway I'm left with the problem of rebinding my controls after the UpdatePanel is done updating the DOM. I preferably need a solution that does not require adding more .js files (jQuery plug-ins) to the page but something as simple as being able to catch the UpdatePanel's 'afterupdating' where I can just call my method to rebind all the form elements.

Solution 1

Since you're using ASP.NET AJAX, you'll have access to a pageLoad event handler, that gets called each time the page posts back, be it full or partial from an UpdatePanel. You just need to put the function in to your page, no hooking up is required.

function pageLoad(sender, args)
{
   if (args.get_isPartialLoad())
   {
       //Specific code for partial postbacks can go in here.
   }
}

Solution 2

Or you could check the latest jQuery's live functionality via the on() method.

Solution 3

Sys.Application.add_load(initSomething);
function initSomething()
{
  // will execute on load plus on every UpdatePanel postback
}

Solution 4

As of jQuery 1.7, the recommended way to do this is to use jQuery's .on() syntax.

Make sure, however, that you set up the event on the document object, not the DOM object itself. For example, this will break after the UpdatePanel postback:

$(':input').on('change', function() {...});

... because the ':inputs' have been rewritten. Do this instead:

$(document).on('change', ':input', function() {...});

As long as the document is around, any inputs (including those from UpdatePanel refreshes) will trigger the change handler.

Solution 5

Use following code

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);

function pageLoaded(sender, args) {
    var updatedPanels = args.get_panelsUpdated();
    // check if Main Panel was updated 
    for (idx = 0; idx < updatedPanels.length; idx++) {
        if (updatedPanels[idx].id == "<%=upMain.ID %>") {
            rebindEventsForMainPanel();
            break;
        }
    }
}

View more solutions

Comments

[Dan Herbert]

This is very similar to this question: stackoverflow.com/questions/256195/…

[Phil Jenkins]

No problem - that's just one way of doing it btw. If you need more flexibility, check out the endRequest event on the PageRequestManager class.

[Chris]

Awesome! I replaced my jquery $(document).ready with your pageLoad (without the if block) and it solved my problem!

[Kyle B.]

This was the best solution for me, as much of my jQuery markup is encapsulated inside several user controls on the page.

[Tim]

can you post example with datepicker?

[Martin Sansone - MiOEE]

Awesome ! (the document) worked lovely using the following .... $(document).on('click','#tagsAdd',function () no matter how many update panels I have breaking up the content of the page :) Thx

[Casey ScriptFu Pharr]

I was just using "on" for binding to a drop down list inside a panel that does async post triggering. It WAS NOT working until, I also included the answer above by @Phil Jenkins. I am not sure if it makes a differenc if it is a async post or full post back, but the on. binder was not handling it after the post back.