jQuery document ready and UpdatePanels

Question

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

User · Answer

My answer is based on all the expert comments above, but below is the following code that anyone can use to make sure on each postback and on each asynchronous postback the JavaScript code will still be executed.

In my case, I had a user control within a page. Just paste the below code in your user control.

<script type="text/javascript"> 
        var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_endRequest(EndRequestHandler);
    function EndRequestHandler(sender, args) {
        if (args.get_error() == undefined) {
            UPDATEPANELFUNCTION();
        }                   
    }

    function UPDATEPANELFUNCTION() {
        jQuery(document).ready(function ($) {
            /* Insert all your jQuery events and function calls */
        });
    }

    UPDATEPANELFUNCTION(); 

</script>

User · Answer

I would use one of the following approaches    Encapsulate the event binding in a function and run it every time you update the page  You can always contain the event binding to specific elements so as not to bind events multiple times to the same elements  Use the livequery plug-in  which basically performs method one for you auto-magically  Your preference may vary depending on the amount of control you want to have on the event binding

User · Answer

pageLoad   function              div   unbind          jquery here     The pageLoad function is perfect for this case since it runs on the initial page load and every updatepanel async postback  I just had to add the unbind method to make the jquery work on updatepanel postbacks   http   encosia com document-ready-and-pageload-are-not-the-same

User · Answer

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

User · Answer

My answer is based on all the expert comments above, but below is the following code that anyone can use to make sure on each postback and on each asynchronous postback the JavaScript code will still be executed.

In my case, I had a user control within a page. Just paste the below code in your user control.

<script type="text/javascript"> 
        var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_endRequest(EndRequestHandler);
    function EndRequestHandler(sender, args) {
        if (args.get_error() == undefined) {
            UPDATEPANELFUNCTION();
        }                   
    }

    function UPDATEPANELFUNCTION() {
        jQuery(document).ready(function ($) {
            /* Insert all your jQuery events and function calls */
        });
    }

    UPDATEPANELFUNCTION(); 

</script>

User · Answer

lt script type  text javascript  gt           function BindEvents                   document  ready function                         tr-base   mouseover function                           this  toggleClass  trHover                       mouseout function                           this  removeClass  trHover                                    lt  script gt    The area which is going to be updated    lt asp UpdatePanel     lt ContentTemplate       lt script type  text javascript  gt                      Sys Application add load BindEvents         lt  script gt       Staff   lt  ContentTemplate gt       lt  asp UpdatePanel gt

User · Answer

pageLoad   function              div   unbind          jquery here     The pageLoad function is perfect for this case since it runs on the initial page load and every updatepanel async postback  I just had to add the unbind method to make the jquery work on updatepanel postbacks   http   encosia com document-ready-and-pageload-are-not-the-same

User · Answer

In response to Brian MacKay s answer   I inject the JavaScript into my page via the ScriptManager instead of putting it directly into the HTML of the UserControl   In my case  I need to scroll to a form that is made visible after the UpdatePanel has finished and returned   This goes in the code behind file   In my sample  I ve already created the prm variable on the main content page   private void ShowForm bool pShowForm          other code here        if  pShowForm            FocusOnControl GetFocusOnFormScript yourControl ClientID   yourControl ClientID            private void FocusOnControl string pScript  string pControlId        ScriptManager RegisterStartupScript this Page  this Page GetType     focusControl     pControlId  pScript  true           lt summary gt      Scrolls to the form that is made visible      lt  summary gt       lt param name  pControlId  gt The ClientID of the control to focus on after the form is made visible lt  param gt       lt returns gt  lt  returns gt  private string GetFocusOnFormScript string pControlId        string script          function FocusOnForm             var scrollToForm           pControlId        offset   top             html  body   animate                scrollTop  scrollToForm                 slow                        This removes the event from the PageRequestManager immediately after the desired functionality is completed so that multiple events are not added            prm remove endRequest ScrollFocusToFormCaller             prm add endRequest ScrollFocusToFormCaller       function ScrollFocusToFormCaller sender  args            if  args get error      undefined                FocusOnForm                          return script

User · Answer

Update Panel always replaces your Jquery with its inbuilt Scriptmanager s scripts after every load  Its better if you use pageRequestManager s instance methods like this     Sys WebForms PageRequestManager getInstance   add endRequest onEndRequest      function onEndRequest sender  args              your jquery code here             it will work fine

User · Answer

FWIW  I experienced a similar issue w mootools   Re-attaching my events was the correct move  but needed to be done at the end of the request  eg  var prm   Sys WebForms PageRequestManager getInstance    prm add endRequest function           Just something to keep in mind if beginRequest causes you to get null reference JS exceptions   Cheers

User · Answer

This is a great plugin for use with update panels   http   updatepanelplugin codeplex com

User · Answer

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    lt script type  text javascript  gt      function BindControlEvents               jQuery is wrapped in BindEvents function so it can be re-bound after each callback            Your code would replace the following line                   lt    TextProtocolDrugInstructions ClientID   gt    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               lt  script gt    So    Just thought someone might like to know that this works

User · Answer

function pageLoad   is very dangerous to use in this situation   You could have events become wired multiple times   I would also stay away from  live   as it attaches to the document element and has to traverse the entire page  slow and crappy     The best solution I have seen so far is to use jQuery  delegate   function on a wrapper outside the update panel and make use of bubbling   Other then that  you could always wire up the handlers using Microsoft s Ajax library which was designed to work with UpdatePanels

User · Answer

FWIW  I experienced a similar issue w mootools   Re-attaching my events was the correct move  but needed to be done at the end of the request  eg  var prm   Sys WebForms PageRequestManager getInstance    prm add endRequest function           Just something to keep in mind if beginRequest causes you to get null reference JS exceptions   Cheers

User · Answer

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

User · Answer

You could also try    lt asp UpdatePanel runat  server  ID  myUpdatePanel  gt       lt ContentTemplate gt            lt script type  text javascript  language  javascript  gt          function pageLoad                   div  Foo   bind  mouseover   function e                      Do something exciting                                   lt  script gt        lt  ContentTemplate gt   lt  asp UpdatePanel gt     since pageLoad   is an ASP NET ajax event which is executed each time the page is loaded at client side

User · Answer

Sys Application add load LoadHandler     This load handler solved update panel did not bind control after partial postback function LoadHandler               document  ready function                rebind any events here for controls under update panel

User · Answer

I would use one of the following approaches    Encapsulate the event binding in a function and run it every time you update the page  You can always contain the event binding to specific elements so as not to bind events multiple times to the same elements  Use the livequery plug-in  which basically performs method one for you auto-magically  Your preference may vary depending on the amount of control you want to have on the event binding

User · Answer

lt script type  text javascript  gt           function BindEvents                   document  ready function                         tr-base   mouseover function                           this  toggleClass  trHover                       mouseout function                           this  removeClass  trHover                                    lt  script gt    The area which is going to be updated    lt asp UpdatePanel     lt ContentTemplate       lt script type  text javascript  gt                      Sys Application add load BindEvents         lt  script gt       Staff   lt  ContentTemplate gt       lt  asp UpdatePanel gt

User · Answer

My answer    function pageLoad          document  ready function      etc   Worked like a charm  where a number of other solutions failed miserably

User · Answer

This worked for me     document  ready function             Do something exciting      var prm   Sys WebForms PageRequestManager getInstance         prm add endRequest function                re-bind your jQuery events here

User · Answer

I had a similar problem and found the way that worked best was to rely on Event Bubbling and event delegation to handle it   The nice thing about event delegation is that once setup  you don t have to rebind events after an AJAX update   What I do in my code is setup a delegate on the parent element of the update panel   This parent element is not replaced on an update and therefore the event binding is unaffected   There are a number of good articles and plugins to handle event delegation in jQuery and the feature will likely be baked into the 1 3 release   The article plugin I use for reference is   http   www danwebb net 2008 2 8 event-delegation-made-easy-in-jquery  Once you understand what it happening  I think you ll find this a much more elegant solution that is more reliable than remembering to re-bind events after every update   This also has the added benefit of giving you one event to unbind when the page is unloaded

User · Answer

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

User · Answer

This worked for me     document  ready function             Do something exciting      var prm   Sys WebForms PageRequestManager getInstance         prm add endRequest function                re-bind your jQuery events here

User · Answer

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

User · Answer

Update Panel always replaces your Jquery with its inbuilt Scriptmanager s scripts after every load  Its better if you use pageRequestManager s instance methods like this     Sys WebForms PageRequestManager getInstance   add endRequest onEndRequest      function onEndRequest sender  args              your jquery code here             it will work fine

User · Answer

I had a similar problem and found the way that worked best was to rely on Event Bubbling and event delegation to handle it   The nice thing about event delegation is that once setup  you don t have to rebind events after an AJAX update   What I do in my code is setup a delegate on the parent element of the update panel   This parent element is not replaced on an update and therefore the event binding is unaffected   There are a number of good articles and plugins to handle event delegation in jQuery and the feature will likely be baked into the 1 3 release   The article plugin I use for reference is   http   www danwebb net 2008 2 8 event-delegation-made-easy-in-jquery  Once you understand what it happening  I think you ll find this a much more elegant solution that is more reliable than remembering to re-bind events after every update   This also has the added benefit of giving you one event to unbind when the page is unloaded

User · Answer

Use below script and change the body of the script accordingly           lt script gt            Re-Create for on page postbacks         var prm   Sys WebForms PageRequestManager getInstance            prm add endRequest function                   your codes here                   lt  script gt

User · Answer

I would use one of the following approaches    Encapsulate the event binding in a function and run it every time you update the page  You can always contain the event binding to specific elements so as not to bind events multiple times to the same elements  Use the livequery plug-in  which basically performs method one for you auto-magically  Your preference may vary depending on the amount of control you want to have on the event binding

User · Answer

lt script type  text javascript  gt           function BindEvents                   document  ready function                         tr-base   mouseover function                           this  toggleClass  trHover                       mouseout function                           this  removeClass  trHover                                    lt  script gt    The area which is going to be updated    lt asp UpdatePanel     lt ContentTemplate       lt script type  text javascript  gt                      Sys Application add load BindEvents         lt  script gt       Staff   lt  ContentTemplate gt       lt  asp UpdatePanel gt

User · Answer

FWIW  I experienced a similar issue w mootools   Re-attaching my events was the correct move  but needed to be done at the end of the request  eg  var prm   Sys WebForms PageRequestManager getInstance    prm add endRequest function           Just something to keep in mind if beginRequest causes you to get null reference JS exceptions   Cheers

User · Answer

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    lt script type  text javascript  gt      function BindControlEvents               jQuery is wrapped in BindEvents function so it can be re-bound after each callback            Your code would replace the following line                   lt    TextProtocolDrugInstructions ClientID   gt    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               lt  script gt    So    Just thought someone might like to know that this works

User · Answer

When   document  ready function          not work after page post back then use JavaScript function  pageLoad  in Asp page  as follow     lt script type  text javascript  language  javascript  gt  function pageLoad        Initialization code here  meant to run once      lt  script gt

User · Answer

You could also try    lt asp UpdatePanel runat  server  ID  myUpdatePanel  gt       lt ContentTemplate gt            lt script type  text javascript  language  javascript  gt          function pageLoad                   div  Foo   bind  mouseover   function e                      Do something exciting                                   lt  script gt        lt  ContentTemplate gt   lt  asp UpdatePanel gt     since pageLoad   is an ASP NET ajax event which is executed each time the page is loaded at client side

User · Answer

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

User · Answer

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

User · Answer

FWIW  I experienced a similar issue w mootools   Re-attaching my events was the correct move  but needed to be done at the end of the request  eg  var prm   Sys WebForms PageRequestManager getInstance    prm add endRequest function           Just something to keep in mind if beginRequest causes you to get null reference JS exceptions   Cheers

User · Answer

function pageLoad   is very dangerous to use in this situation   You could have events become wired multiple times   I would also stay away from  live   as it attaches to the document element and has to traverse the entire page  slow and crappy     The best solution I have seen so far is to use jQuery  delegate   function on a wrapper outside the update panel and make use of bubbling   Other then that  you could always wire up the handlers using Microsoft s Ajax library which was designed to work with UpdatePanels

User · Answer

I would use one of the following approaches    Encapsulate the event binding in a function and run it every time you update the page  You can always contain the event binding to specific elements so as not to bind events multiple times to the same elements  Use the livequery plug-in  which basically performs method one for you auto-magically  Your preference may vary depending on the amount of control you want to have on the event binding

User · Answer

My answer    function pageLoad          document  ready function      etc   Worked like a charm  where a number of other solutions failed miserably

User · Answer

In response to Brian MacKay s answer   I inject the JavaScript into my page via the ScriptManager instead of putting it directly into the HTML of the UserControl   In my case  I need to scroll to a form that is made visible after the UpdatePanel has finished and returned   This goes in the code behind file   In my sample  I ve already created the prm variable on the main content page   private void ShowForm bool pShowForm          other code here        if  pShowForm            FocusOnControl GetFocusOnFormScript yourControl ClientID   yourControl ClientID            private void FocusOnControl string pScript  string pControlId        ScriptManager RegisterStartupScript this Page  this Page GetType     focusControl     pControlId  pScript  true           lt summary gt      Scrolls to the form that is made visible      lt  summary gt       lt param name  pControlId  gt The ClientID of the control to focus on after the form is made visible lt  param gt       lt returns gt  lt  returns gt  private string GetFocusOnFormScript string pControlId        string script          function FocusOnForm             var scrollToForm           pControlId        offset   top             html  body   animate                scrollTop  scrollToForm                 slow                        This removes the event from the PageRequestManager immediately after the desired functionality is completed so that multiple events are not added            prm remove endRequest ScrollFocusToFormCaller             prm add endRequest ScrollFocusToFormCaller       function ScrollFocusToFormCaller sender  args            if  args get error      undefined                FocusOnForm                          return script

User · Answer

Sys Application add load LoadHandler     This load handler solved update panel did not bind control after partial postback function LoadHandler               document  ready function                rebind any events here for controls under update panel

User · Answer

Use below script and change the body of the script accordingly           lt script gt            Re-Create for on page postbacks         var prm   Sys WebForms PageRequestManager getInstance            prm add endRequest function                   your codes here                   lt  script gt

User · Answer

I had a similar problem and found the way that worked best was to rely on Event Bubbling and event delegation to handle it   The nice thing about event delegation is that once setup  you don t have to rebind events after an AJAX update   What I do in my code is setup a delegate on the parent element of the update panel   This parent element is not replaced on an update and therefore the event binding is unaffected   There are a number of good articles and plugins to handle event delegation in jQuery and the feature will likely be baked into the 1 3 release   The article plugin I use for reference is   http   www danwebb net 2008 2 8 event-delegation-made-easy-in-jquery  Once you understand what it happening  I think you ll find this a much more elegant solution that is more reliable than remembering to re-bind events after every update   This also has the added benefit of giving you one event to unbind when the page is unloaded

User · Answer

lt script type  text javascript  gt           function BindEvents                   document  ready function                         tr-base   mouseover function                           this  toggleClass  trHover                       mouseout function                           this  removeClass  trHover                                    lt  script gt    The area which is going to be updated    lt asp UpdatePanel     lt ContentTemplate       lt script type  text javascript  gt                      Sys Application add load BindEvents         lt  script gt       Staff   lt  ContentTemplate gt       lt  asp UpdatePanel gt

User · Answer

This is a great plugin for use with update panels   http   updatepanelplugin codeplex com

User · Answer

When   document  ready function          not work after page post back then use JavaScript function  pageLoad  in Asp page  as follow     lt script type  text javascript  language  javascript  gt  function pageLoad        Initialization code here  meant to run once      lt  script gt

User · Answer

I had a similar problem and found the way that worked best was to rely on Event Bubbling and event delegation to handle it   The nice thing about event delegation is that once setup  you don t have to rebind events after an AJAX update   What I do in my code is setup a delegate on the parent element of the update panel   This parent element is not replaced on an update and therefore the event binding is unaffected   There are a number of good articles and plugins to handle event delegation in jQuery and the feature will likely be baked into the 1 3 release   The article plugin I use for reference is   http   www danwebb net 2008 2 8 event-delegation-made-easy-in-jquery  Once you understand what it happening  I think you ll find this a much more elegant solution that is more reliable than remembering to re-bind events after every update   This also has the added benefit of giving you one event to unbind when the page is unloaded

[javascript] jQuery $(document).ready and UpdatePanels?

Examples related to javascript

Examples related to jquery

Examples related to asp.net

Examples related to asp.net-ajax

Examples related to jquery-events