Multiple jQuery versions with MatchPoint

Date: 27. Jun 2014

A frequently asked question is whether multiple jQuery versions can be used when working with MatchPoint. This is available as of version 4.0.4. This technical blog post explains how to do this by making use of the jQuery.noConflict() function.

MatchPoint 4 uses jQuery version 1.8.3. Up to now this jQuery version was assigned globally to the well-known "jQuery" and "$" variables. Certain jQuery plugins or solutions however require an own, specific version of jQuery which differs from the one required by MatchPoint. Even though it is officially not recommended, jQuery provides the possibility to run two different versions on the same page. This can be achieved using the noConflict() function:

Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery's case, $ is just an alias for jQuery, so all functionality is available without using $. If you need to use another JavaScript library alongside jQuery, return control of $ back to the other library with a call to $.noConflict(). Old references of $ are saved during jQuery initialization; noConflict() simply restores them.

Usage within MatchPoint

As of MatchPoint version 4.0.4 jQuery is registered on the global variable mp$, this is what MatchPoint (and MatchPoint Snow) internally use, thus making it independent of the global $ and jQuery variables.

Additionally the MatchPointConfiguration offers a property named RegisterJQueryGlobally:

• If this property is selected (which is the default case), the jQuery version will be referenced by the "jQuery" and the "$" variables. This is the normal, downward-compatibility behavior of MatchPoint.
• If this property is not selected, MatchPoint will execute jQuery.noConflict() after loading the MatchPoint JavaScript files. The global jQuery variables will then be unassigned. This can be used for example to force the developers to use their own jQuery and thus be independent of the MatchPoint version.

Examples

As MatchPoint uses its own jQuery variable, partners can now load their required jQuery version without breaking MatchPoint. The following code (which can be placed in a composite configuration for example) demonstrates this. Please note that MatchPointConfiguration.RegisterJQueryGlobally needs to be set to true in order for this test to work:

<!-- output container -->
<div id="jq-output"></div>

<!-- JavaScript functions used to print the current version -->
<script type="text/javascript">
  function PrintVersion()
  {
    Print("version: " + jQuery.fn.jquery);
  }

  function Print(message)
  {
    $("#jq-output").append(message + "<br/>");
  }
</script>

<!-- 1: print current version (MatchPoint jQuery) -->
<script type="text/javascript">
    PrintVersion();
 </script>

<!-- 2: load jQuery 2.1.0 and print current version -->
<script type="text/javascript"
        src="https://code.jquery.com/jquery-2.1.0.min.js"></script>

<script type="text/javascript">
    Print("loaded 'jquery-2.1.0.min.js'");
    PrintVersion();
    /* 3: call noConflict on current jQuery version 
       (should be 2.1.0) and print version again */
    jQuery.noConflict(true);
    Print("called 'jQuery.noConflict(true);'");
    PrintVersion();
</script>

The output will be:

• version: 1.8.3
• loaded 'https://code.jquery.com/jquery-2.1.0.min.js'
• version: 2.1.0
• called 'jQuery.noConflict(true);'
• version: 1.8.3

Maybe you only want to execute a part of your code with a specific jQuery version and still be able to use the $ variable within that code. You can achieve this by loading your jQuery version and then calling noConflict to store the reference to it in a variable. Next place the section which needs to run with the loaded version and put it in a self-invoking function that takes jQuery as a parameter. Within your function you can then use $:

<script type="text/javascript">
    PrintVersion();
    var jQuery210 = jQuery.noConflict(true);
    PrintVersion();

    (function($)
    {
        Print("version in self calling method: " + $.fn.jquery);
    })(jQuery210);
</script>

The output in this case will be:

• version: 2.1.0 [or what ever was loaded before..]
• version: 1.11.1
• version in self calling method: 2.1.0 [or what ever was loaded before..]

Usage within MatchPoint Solutions

Please note that MatchPoint can automatically deploy CSS files, JavaScript files and MatchPoint configuration files per WSP as described in this blog post. The order in which MatchPoint loads these files (within your Visual Studio project) can not be configured. This means that you need to ensure that the correct jQuery file/version is loaded, before making use of it.