Presented at JoomlaDay Chicago 2019

1.
FIXING AND
UPDATING JQUERY
CODE
OLIVIER BUISARD
OCTOBER 2019

2. Olivier Buisard 10/11/2019
NO, jQuery is not dead
• Very popular (large community and pool of plugins)
• Ensures you write the code once for all browsers
• Use the newest features, available even for older browsers
• Requires less code to write
• Lighter library now that support for IE6-8 has been removed

3. Olivier Buisard
LIBRARIES USAGE
10/11/2019
0%
20%
40%
60%
80%
2012 2015 2019
2%4%5%
74%
61%
43%
24%
35%
49%
no libraries jQuery MooTools
Source: Web Technology Surveys
w3techs.com/technologies/history_overview/javascript_library

4. Olivier Buisard
WHY MIGRATE?
• Preserve compatibility of old jQuery code
• Deprecated code won’t ‘break’
• Available in Joomla 3, not in Joomla 4
BUT
• Extra code to execute
• Additional library to load
10/11/2019

5. Olivier Buisard
MIGRATE VERSIONS
10/11/2019
Migrate jQuery
None Up to v1.8
v1.4.1 v1.9 up to v1.12.4/2.2.4
(v2 removes support for IE6-8)
v3.1.0 V3.x
Migrate v3.1 WILL NOT resolve errors caught by v1.4.1

6. Olivier Buisard
INSTALL JQUERY EASY
10/11/2019

7. Olivier Buisard
SCRIPTS UNDER JQUERY V1.12.4
• Enable the jQuery Easy plugin
• Set jQuery to v1.12.4
• Set Migrate to v1.4.1
• Use uncompressed versions
• Check the browser console
10/11/2019

8. Olivier Buisard
SCRIPTS UNDER JQUERY V1.12.4
• Fix jQuery code
(https://github.com/jquery/jquery-migrate/blob/
1.x-stable/warnings.md)
• Disable Migrate
• Test the site
10/11/2019

9. Olivier Buisard
SCRIPTS UNDER JQUERY V3.4.1
• Set jQuery to v3.4.1
• Set Migrate to v3.1.0
• Use uncompressed versions
• Check the browser console
10/11/2019

10. Olivier Buisard
SCRIPTS UNDER JQUERY V3.4.1
• Fix jQuery code
https://github.com/jquery/jquery-migrate/blob/
master/warnings.md
• Disable Migrate
• Test the site
10/11/2019

11. Olivier Buisard
REMOVING MIGRATE IN JOOMLA
JHtml::_('bootstrap.framework’);
(Calls JHtml::_('jquery.framework’);)
10/11/2019
JHtml::_('script', 'jui/bootstrap.min.js',
array('version' => 'auto', 'relative' => true));
JHtml::_('jquery.framework’, true, null, false);

12. Olivier Buisard
public function onAfterInitialise()
{
JHtml::register('jquery.framework', function ($noConflict = false, $debug = null, false)
{
JHtml::_('script', '.../
jquery-2.2.4.min.js', array('version' => 'auto', 'relative' => true, 'detectDebug' => $debug));
// Check if we are loading in noConflict
if ($noConflict)
{
JHtml::_('script', 'jui/jquery-
noconflict.js', array('version' => 'auto', 'relative' => true));
}
// Check if we are loading Migrate
if ($migrate)
{
JHtml::_('script', 'jui/jquery-
migrate.min.js', array('version' => 'auto', 'relative' => true, 'detectDebug' => $debug));
}
}
}
REMOVING MIGRATE IN JOOMLA
10/11/2019

13. Olivier Buisard
AVOID SCRIPT ISSUES IN JOOMLA
• Identify extensions needing jQuery
• Is your template using jQuery (Bootstrap? yes!)
• Turn off jQuery in extensions if parameter
• If other libraries are present, use jQuery.noConflict()
• Identify which Bootstrap version your template is using
10/11/2019

14. Olivier Buisard
AVOID SCRIPT ISSUES IN JOOMLA
• If MooTools is present, try identify why it is necessary on
the page
• Overuse the browser console (great for CSS too!)
10/11/2019

15. Olivier Buisard
AVOID SCRIPT ISSUES IN JOOMLA
• Make sure the code is encapsulated correctly
10/11/2019
$(document).ready(function(){
$("div").hide(); // picked up by jQuery and MooTools
});
jQuery(document).ready(function($){
$("div").hide(); // picked up by jQuery only
});

16. Olivier Buisard
AVOID SCRIPT ISSUES IN JOOMLA
10/11/2019
var $j = jQuery.noConflict(); // Use jQuery via $j(...)
$j(document).ready(function(){
$j("div").hide();
});
jQuery.noConflict()(function(){ /* code using jQuery */ });
(function($) { /* some code that uses $ */ })(jQuery)

17. Olivier Buisard
GETTING HELP WITH JQUERY EASY
10/11/2019

18. Olivier Buisard
REFERENCES
• https://jquery.com/upgrade-guide/3.0/
• https://simplifyyourweb.com/documentation/tutorials/470-how-to-
update-old-jquery-scripts-for-compatibility-with-jquery-3
10/11/2019

19. Olivier Buisard
OLIVIER.BUISARD@SIMPLIFYYOURWEB.COM
@SIMPLIFYYOURWEB THANK YOU!
10/11/2019