How to Add/Run Custom Javascript code on the One Page Checkout (advanced)

If you've added custom jQuery or javascript code to your checkout page, you may have noticed that when the page updates (such as a form changing, etc) some of the effects of your script can be lost.

This is because the One Page Checkout uses ASP.NET update panels. These will reload a section of the page via AJAX and will update an entire section of HTML. This happens in areas such as the Address Area, Shipping Area, Payment Area, or even the whole page.

In order for your scripting to continue working after these update,  you'll need to add your code to the "Page Request Manager". This way it can run again after the HTML has updated.

The following code can be used as a skeleton for you to insert your code into. Put any custom code you want to run inside the "OnePageCheckout_EndRequestHandler" function.

<script>
    function OnePageCheckout_EndRequestHandler(sender, args) {
      //your custom code
      //goes in this function
    }

    //shortcut for $(document).ready()
    $(function() {
      //page request manager object
      var prm = Sys.WebForms.PageRequestManager.getInstance();
      
      //run the function on initial page load
      OnePageCheckout_EndRequestHandler();
      
      //this will add the function to the end of the page request manager to run your code AFTER the page's update panels have reloaded.
      if (OnePageCheckout_EndRequestHandler) {
        prm.add_endRequest(OnePageCheckout_EndRequestHandler);
      }
    });
</script>