Update jQuery

 

The jQuery 2 line (latest version jQuery 2.2.4) is deprecated and no longer supported. Among other bugs, it has two low/medium-severity security vulnerabilities that will not be patched. As a good practice, websites should now use jQuery 3 (latest version 3.5.1 at this time).

 

Upgrading to jQuery 3 also entails upgrading to Bootstrap 4, since Bootstrap 3 does not support jQuery 3.

 

Both upgrades include breaking changes, so application code must be revised and the website retested to avoid introducing bugs.

 

To update jQuery on a website, do the following:

 

1. Update the sed_module_manager, sed_core and sed_site modules.
2. You should see two new templates appear in SITE-DEV > Site structure > Site Templates: sed_site_master_v3 et sed_site_page_v3.
   1. In Db exec, you can run this request to update (added by Etienne 2020-10-07)

UPDATE sed_site_page
set template = "sed_site_page_v3"
WHERE template = "sed_site_base_from_master"

1. Find all site pages the use the old sed_site_base_from_master template. For those pages, change the template to sed_site_page_v3. Generate the pages.
2. If the sed_site_master template is used for master pages, replace it by sed_site_master_v3.
3. Open your browser's Developer Tools and load the website's pages. When searching for jquery in Elements or filtering for jquery in Network > JS, you should see jquery-3.5.1 being loaded instead of jquery-2.2.4.
4. Do a regression test on the whole website, as jQuery 3 introduces some breaking changes.

 

2.1 Breaking changes

The update to jQuery 3 introduces breaking changes. That means that the whole site must be regression tested.

 

Those changes are described in the following documents:

 

jQuery Core 3.0 Upgrade Guide

https://jquery.com/upgrade-guide/3.0/

 

jQuery Core 3.5 Upgrade Guide

https://jquery.com/upgrade-guide/3.5/

 

Actual modifications that we had to do to the websites until now to make them compatible include the following. Of course, the other cases documented in the upgrade guides could still occur on other websites:

 

2.1.1 Breaking change: Special-case Deferred methods removed from jQuery.ajax

The following construct will cause an error, as the .success() and .error() methods have been removed in the object returned by the .ajax() call:

/* WRONG */
$.ajax({
	url: url
})
.success(fn)
.error(fn);

 

Replace it with this:

$.ajax({
	url: url,
	success: fn,
	error: fn
});

 

Or this if you prefer:

$.ajax({
	url: url
})
.done(fn)
.fail(fn);

 

2.1.2 Breaking change: .removeAttr() no longer sets properties to false

In most cases, the following way to set boolean properties is a mistake:

/* WRONG */
$element.attr('disabled', true);
$element.removeAttr('disabled');

 

Instead, replace occurrences like this by the following:

$element.prop('disabled', true);
$element.prop('disabled', false);

 

2.1.3 Deprecated: document-ready handlers other than jQuery(function)

Due to historical compatibility issues there are a multitude of ways to set a document ready handler. All of the following are equivalent and call the function fn when the document is ready:

$(fn);
$().ready(fn); /* Deprecated */
$(document).ready(fn); /* Deprecated */
$("selector").ready(fn); /* Deprecated */

 

As of jQuery 3.0 the recommended way to add a ready handler is the first method, $(fn).

 

2.1.4 Breaking change: .andSelf() removed, use .addBack()

This no longer works and now causes an error:

$element.siblings().andSelf()

 

Replace by the following:

$element.siblings().addBack()

 

2.1.5 jQuery no longer fixes invalid self-closing HTML tags

This is not valid HTML:

<!-- WRONG -->
<a class="edit_btn dropdown-item" href="javascript:void(0)">
    <span class="fas fa-pencil mr-2" /> Edit
</a>

 

jQuery 2.2.4 was catching those, and replacing (in that case) <span /> by <span></span>. Since jQuery no longer does this, the self-closing tag will be interpreted as an opening tag by the browser, which breaks the HTML structure:

<!-- INTERPRETED THIS WAY BY THE BROWSER -->
<a class="edit_btn dropdown-item" href="javascript:void(0)">
    <span class="fas fa-pencil mr-2">
 Edit
 </span>
</a>

 

The correct way to code the above is this:

<a class="edit_btn dropdown-item" href="javascript:void(0)">
    <span class="fas fa-pencil mr-2"></span> Edit
</a>

 

2.2 Website using the app_single_page module

The app_single_page module has been updated to use jQuery 3 in its page templates. If the website uses the single_page_extranet template, do the following:

 

1. Update the app_single_page module.
2. Find the site pages that use the template (normally there is just one named extranet), and generate them.

 

2.3 Website using custom page templates

If a website uses custom templates for its pages instead of the ones in sed_site, then changes must be made there too.

 

The following code can be used to replace the corresponding library modules:

 <!-- jQuery -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
 <!-- jQuery UI -->
 <script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.min.css" integrity="sha512-+0Vhbu8sRUlg+R/NKgTv7ahM+szPDF10G6J5PcHb1tOrAaquZIUiKUV3TH16mi6fuH4NjvHqlok6ppBhR6Nxuw==" crossorigin="anonymous" />
 <!-- Popper -->
 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
 <!-- Bootstrap -->
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
 <!-- jQuery Form -->
 <script type="text/javascript" src="/extenso/jquery.form.js/jquery.form.min.js"></script>
 <!-- Magnific Popup script and CSS -->
 <script type="text/javascript" integrity="sha384-fexNtx3nPE3sjIQuGk8G2X8X/aSEBVMC58R839hkgsY/Xjhvkm7m2otGhwrdESWj" crossorigin="anonymous" src="//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
 <link href="//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet" crossorigin="anonymous">
 <!-- Bootstrap Multiselect -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css" integrity="sha256-7stu7f6AB+1rx5IqD8I+XuIcK4gSnpeGeSjqsODU+Rk=" crossorigin="anonymous" />
 <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js" integrity="sha256-qoj3D1oB1r2TAdqKTYuWObh01rIVC1Gmw9vWp1+q5xw=" crossorigin="anonymous"></script>