help desk
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:
sed_module_manager
, sed_core
and sed_site
modules.sed_site_master_v3
et sed_site_page_v3.
UPDATE sed_site_page set template = "sed_site_page_v3" WHERE template = "sed_site_base_from_master"
sed_site_base_from_master
template. For those pages, change the template to sed_site_page_v3
. Generate the pages.sed_site_master
template is used for master pages, replace it by sed_site_master_v3
.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.
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:
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);
.removeAttr()
no longer sets properties to falseIn 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);
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)
.
.andSelf()
removed, use .addBack()
This no longer works and now causes an error:
$element.siblings().andSelf()
Replace by the following:
$element.siblings().addBack()
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>
app_single_page
moduleThe 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:
app_single_page
module.
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>
Répondu le : 2022-01-14 12:52:00