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

Answer 1

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;
        }
    }
}

Answer 2

Bind your events using jQuery's new 'live' method. It will bind events to all your present elements and all future ones too. Cha ching! :)

Answer 3

Use the following code, You need to validate the control will use the datapicker:

    <script type="text/javascript" language="javascript">

         Sys.WebForms.PageRequestManager.getInstance().add_endRequest(addDataPicker); 
         function addDataPicker(sender, args)
         {
            var fchFacturacion = document.getElementById('<%= txtFechaFacturacion.ClientID %>');
            if (fchFacturacion != null) {
               $(fchFacturacion).datepicker({ onSelect: function () { }, changeMonth: true, changeYear: true, showOn: 'button', buttonImage: '../Imagenes/calendar.gif', buttonImageOnly: true});}
         } 

    </script>

     <asp:UpdatePanel ID="upEjem" runat="server" UpdateMode="Conditional">
       <ContentTemplate>
              <div id="div1" runat="server" visible="false">
                  <input type="text" id="txtFechaFacturacion" 
                      name="txtFechaFacturacion" visible="true"
                      readonly="readonly" runat="server" />
              </div>
       </ContentTemplate>
     </asp:UpdatePanel>

Answer 4

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.
   }
}

Answer 5

You could use jQuery and event delegation. Basically hook events to containers rather than every element and query the event.target and run script based on that.

It has multiple benefits in that you reduce the code noise (no need to rebind). It is also easier on browser memory (less events bound in the DOM.)

Quick example here.

jQuery plugin for easy event delegation.

P.S I am 99% sure delegation will be in the jQuery core at the next release.

Answer 6

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