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.
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:
Aeon 5.0 default web pages and later:
- Core jQuery: include_head.html (line 16), Logon.html (line 85)
- jQuery UI: include_head_request.html (lines 1-2), include_appointment_scripts.html (lines 4-5)
Default web pages prior to Aeon 5.0:
- Core jQuery: include_head.html (line 12), CreditCardPayment.html (line 11)
- jQuery UI: include_head_request.html (line 2)
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:
Navigate to your production repository in GitHub (the name of this repository will begin with AtlasSystems-Prod):
Use the search bar at the top of the page to search for "jQuery" in the repository:
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:
Replace outdated core jQuery references with the following <script> tag for version 3.5.1:
Replace outdated jQuery UI references with the following <link> and <script> tags for version 1.12.1:
- Check the js and css folders in your Aeon web directory and remove any old jQuery/jQuery UI files referencing outdated versions
Note for Web Pages Prior to Aeon 5.0
The Aeon default web pages prior to v5.0 contain references to a jQuery migrate file that does not need to be updated. The line referencing this file is found by default underneath the reference to the core jQuery file in include_head.html and CreditCardPayment.html and can be left as is:
The jquery-migrate-1.4.1.min.js file can also be left in the js folder in the web directoy.
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:
- 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
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>">
src="js/<insert jquery-ui.js filename here>">