Use two versions of jQuery in the same page

This is for:

Developer
In this article

The jQuery dependency was removed from the JavaScript Search Framework as it became open source with the July 2016 release (v1.667.24).

If your JavaScript Search Framework version was released before July 2016, it’s developed, tested, and distributed with a specific version of jQuery (see Download the JavaScript Search Framework). It’s therefore recommended to use this jQuery version to prevent issues.

Since jQuery is very popular, you may already be using jQuery for other purposes on the site in which you want to use the Coveo JavaScript Framework. There are good chances that you don’t use the same jQuery version as the one bundled with the Coveo package. You may therefore have to include two different versions of jQuery in the same page. Although the best situation would be to always include a single jQuery version per page, sometimes it’s just not possible. If you’re using another library that also uses the $ variable, you can run into conflicts with jQuery.

The standard method to resolve these issues is to use jQuery.noConflict() (see Avoiding Conflicts with Other Libraries).

The Coveo JavaScript Search Framework however offers an equivalent extension which allows to automatically perform the same variable swapping, giving the control back of the $ variable to other libraries:

$('#mySearch').coveo('noConflict')

After calling noConflict, you must use Coveo.$ to perform any jQuery call in relation with the Coveo JavaScript Search Framework to ensure that you always use the bundled jQuery version.

After calling noConflict, the jQuery event queues of the different jQuery versions will be handled in separate variables.

Here’s an example how it can be used.

<script src="yourJquery.js"></script>
<script src="js/CoveoJsSearch.Dependencies.js"></script>
<script src="js/CoveoJsSearch.js"></script>

<script type="text/javascript">
$(function(){
    $('#mySearch').coveo('noConflict')
    Coveo.$('.MyComponents').on('buildingQuery',function(e, args) {

    });

    Coveo.$('.MyComponents').coveo('init');
})

</script>

If done correctly, when you load the page, in the console of your browser type following commands to see the jQuery versions that are available in the page:

$.fn.jquery

Returns the version of yourjQuery.js.

Coveo.$.fn.jquery

Returns the scoped version used internally by the Coveo framework.

  • Your Coveo-powered search page may not show any results.
  • In the browser developer tools, in the Network tab, you may not see the errorassuccess Coveo response.
  • For a line such as $('#search').coveo('init');, you may get the error: Uncaught TypeError: $(...).coveo isn't a function This error means .coveo methods aren’t recognized.

In such a case, ensure that you follow the instructions in this article to resolve the conflict.