KnowledgeCenter/AmeriCommerce/Theming & Site Design

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

Support Agent
posted this on September 05, 2012 18:38

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 that will reload a section of the page via AJAX and will update an entire section of HTML such as the Address Area, Shipping Area, Payment Area, or even the whole page.

In order for your scripting to continue working after these updates. you'll need to add your code to the "Page Request Manager" so that it can run again after the HTML has been 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>