jQuery multiple libraries compatibility
The most of times we did try to use extensions with different jQuery libraries, we had problems.
So, when we developed our parallax plugin, needing jQuery, we tried to understand if there was a way to solve the problem.
Apparently, as of our tests, we found the solution adopting a different approach.
Every plugin we saw before, usually declared the inclusion of the library, and then tried to use always the same variable, as if no other plugins could make the same work.
Instead we though inclusion of jQuery library must be immediately followed by the assignment of jQuery function to a variable specific for the plugin.
For example, this would how we develop a simple sequence of more plugins using different jQuery libraries.
- plugin Mickey declares jQuery library x.x.x, and declares its variable jMickey.
- plugin Bruce declares jQuery library y.y.y, and declares its variable jBruce2016.
- plugin Jack declares jQuery library z.z.z, and declares its variable jjjjzzz.
- Ease3:
- includes javascript code for jQuery library x.x.x followed by javascript code for assigning that library function to jMickey variable.
- includes javascript code for jQuery library y.y.y followed by javascript code for assigning that library function to jBruce2016 variable.
- includes javascript code for jQuery library z.z.z followed by javascript code for assigning that library function to jjjjzzz variable.
- Plugins, whenever they will run:
- Mickey will use its jQuery version using the variable jMicke.
- Bruce will use its jQuery version using the variable jBruce2016.
- Jack will use its jQuery version using the variable jjjjzzz.
How to make it
This architecture may be easily and automatically achieved in two different ways:
- by Typoscript SETUP
includeJS.name1 = file_library
includeJS.name1.jQueryNoConflictNames.jvariable_name = "whatever_value"
note 1: jvariable_name is the name of the wanted variable and whatever_value is not important
note 2: you may add more variables with different names, if needed. - By PHP call:
call renderer function addJqNoConflictName($jqFile, $jqName)
after calling the renderer function addJsFile($jqFile, ...).
Note: you may include more variables, calling addJqNoConflictName() more times.
First method is simpler, but will always include the library in page.
Second method involves a few coding, but will include the jQuery library in page only if really needed.
For both methods, do not forget to use jQuery library by the variable you asked for.
- Ease3 releases and requirements
- Ease3 added features
- Public access to FE pages disabled during maintenance
- Customization of error and maintenance pages
- FE login with username or email address
- Customize default http:/https: behaviour
- Scheduler enhancement
- jQuery multiple libraries compatibility
- Flexform enhancements
- TS condition frontEndLayout for versatile pages
- Additional link vars
- Reference documentation
- Online manuals
- Books & eBooks
- Resources
- Courses