Skip to content
English - United States
Contact Us
  • There are no suggestions because the search field is empty.

How to setup jquery noConflict

Sometimes you have customizations to your websites that require outdated copies of jQuery to operate properly. You can setup a jQuery noConflict to bring in an old version of jQuery.

Important Security & Performance Warnings

  • PCI DSS 4.0 Compliance: PCI DSS 4.0 stipulates that the site owner is responsible for ensuring all system components are protected from known vulnerabilities. Volusion will not be responsible for any PCI violations you incur as a result of running out-of-date software.
  • Performance Impact: Loading multiple copies of jQuery will increase page weight and make your website slower.


Normally, when jQuery is loaded in a web browser, it is done via a script tag in the HTML <head> or before the closing </body> tag:

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

This creates an alias variable in JavaScript called $, as well as the global jQuery variable. All jQuery code from that point forward typically uses the $ variable to perform functions:

// Example of standard jQuery syntax
$.each(array, function(index, value) {
    // Loop logic here
});

$(element).on('click', function() {
    // Click event logic here
});

Because the $ variable is globally shared, upgrading jQuery can break older custom scripts that rely on deprecated functions.

Normally, if you load a different version of jQuery after a previous version has already been loaded, the $ variable is overridden by the most recently loaded version. For example, if you load jQuery 3.7.1 first, and then load jQuery 1.12.4 immediately after it, $ will refer to version 1.12.4.

To prevent this conflict and keep both versions accessible, you can use the jQuery.noConflict() method.

Here is how you load a legacy version without breaking the primary, modern version:








<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<script>
  // This relinquishes control of '$' and 'jQuery' back to version 3.7.1
  // and assigns version 1.12.4 to our custom variable: jq1124
  var jq1124 = jQuery.noConflict(true);
</script>

Technical Explanation of noConflict(true)

  • jQuery.noConflict() (Without true): Relinquishes the global $ variable back to whatever it was before this version loaded, but keeps the global jQuery variable assigned to this version.
  • jQuery.noConflict(true) (With true): Relinquishes both $ and jQuery globals back to their previously loaded versions. This is required when you want to completely isolate the second version under a brand-new variable name (like jq1124), leaving the primary jQuery installation completely untouched.

$ will always refer to the most recently loaded version of jquery unless you call the jQuery.noConflict(true). the noConflict(true) restores the previously loaded version of jquery to the $ alias.

Guidance for Updating Custom Code

For your custom website code to work with the legacy version, any references to $ meant for the old version must be substituted with jq1124.

You will need to scan your custom JavaScript files and update the selectors:




// CONVERT THIS (Old Broken Code):
$(element).each(function() {
    // logic
});

// TO THIS (Updated Conflict-Free Code):
jq1124(element).each(function() {
    // logic
});



This will be needed on all custom javascript code that breaks. Volusion cannot be aware of or provide a service to correct custom code to this extent (there can be many references to this $ in the custom code).