Updating Outdated jQuery in the Aeon Web Pages

As of October 1, 2021, the minimum version of core jQuery required for PCI compliance is v3.5.1. Prior versions of jQuery will not pass code reviews required for PCI sites. Along with the core jQuery library, the jQuery UI library should also be updated to at least v1.12.1 to ensure compatibility with Aeon date pickers. This article will detail how to locate and update references to jQuery used in your web pages to ensure they are on the minimally required versions.

Locating jQuery References in the Web Pages | Updating Outdated jQuery References | Using Custom jQuery UI Themes

Locating jQuery References in the Web Pages

References to jQuery are found in a few default locations in the Aeon web pages, but your web pages may also contain additional references based on your past web customizations. The files in your web directory will need to be thoroughly checked to confirm and update the version of all jQuery references used in your web pages, if necessary. 

Default Locations

The Aeon default web pages contain references to both the core JQuery library and the jQuery UI library. The default locations of these references are as follows:

Finding Additional Locations

You may find that your web pages have been customized to contain additional references to either of these two jQuery libraries. You can perform a search of your production repository in GitHub to locate all jQuery references in your web pages:

1. Navigate to your production repository in GitHub (the name of this repository will begin with AtlasSystems-Prod):

   

2. Use the search bar at the top of the page to search for "jQuery" in the repository:

   

3. Review the results of the search to locate references to the core jQuery library and jQuery UI, noting the version number in each referenced jQuery file to determine which may need to be updated:

   You can differentiate between references to core jQuery vs. the jQuery UI by looking at the name of the linked jQuery file. References to the jQuery UI will contain "ui" in the filename.

   

Updating Outdated jQuery References

After locating all instances of jQuery references in your web pages, review the version number in the filename of each reference to determine if any need to be updated. All references to core jQuery should be updated to at least v3.5.1 and all references to jQuery UI should be updated to at least v1.12.1:

1. Replace outdated core jQuery references with the following <script> tag for version 3.5.1:

   <script src="https://code.jquery.com/jquery-3.5.1.min.js" 
   integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" 
   crossorigin="anonymous"></script>

2. Replace outdated jQuery UI references with the following <link> and <script> tags for version 1.12.1:

   <link rel="stylesheet" 
   href="https://code.jquery.com/ui/1.12.1/themes/redmond/jquery-ui.css" 
   integrity="sha384-XNjeV9qOpTfbgoJN6kPRjm9I4k+wosO3rtYtMhi4PdGKh/lG8T0iMPnXxPis/LLf" 
   crossorigin="anonymous">
   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" 
   integrity="sha384-Dziy8F2VlJQLMShA6FHWNul/veM9bCkRUaLqr199K94ntO5QUrLJBEbYegdSkkqX" 
   crossorigin="anonymous"></script>

3. Check the js and css folders in your Aeon web directory and remove any old jQuery/jQuery UI files referencing outdated versions

<script type="text/javascript" src="js/jquery-migrate-1.4.1.min.js"></script>

Using Custom jQuery UI Themes

If preferred, custom jQuery UI themes can be created and downloaded from the jQuery ThemeRoller tool for use on your web pages:

1. After designing your theme and downloading the files, copy the following files into your Aeon web directory in the specified folders:
   • Copy the jquery-ui.min.js file into the js folder in your web directory
   • Copy the jquery-ui.css into the css folder in your web directory
   • If your download includes an images folder, copy the image files contained in this folder into the images subfolder within css folder in your web directory

2. Locate and update all references to the jQuery UI in your web pages with internal links to these files:

   <link rel="stylesheet" type="text/css" 
   href="css/<insert jquery-ui.css filename here>">
   <script type="text/javascript" 
   src="js/<insert jquery-ui.js filename here>">
   </script>