Under construction - work in progress

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.