blog
Avoiding jQuery Version Conflicts when Working with Siteore WFFM

When using Sitecore's Web Forums for Marketers (WFFM) module, do you ever face issues with conflicting versions of jQuery? If so, then I have an easy solution for you. Use the jQuery.noConflict() method, provided by jQuery Core OOTB.

The call should look something like the following:

$.noConflict();

If you have a solution where you do not have include the WFFM module's JS on every page and jQuery.noConflict() is causing issues on pages where only one version of jQuery has been loaded, then there's a solution to that too!

Fortunately, jQuery registers itself as an AMD module, so you can check to see if jQuery is already loaded on the page before you call jQuery.noConflict(). To do this, wrap the call to jQuery.noConflict() in the following condition:

if (typeof window.jQuery != 'undefined') {
    $.noConflict();
} 

If you're wondering where you should put this script, it may vary by solution but it ordinarily belongs at the top of a handler/code-block that is fired on window load, and should be one of the first things to run.

2 Comments
Post a Comment

 
  • Comment by Premkumar on Nov 26, 2016
    Hi, I have used jquery different version in all other page which dont have wffm form. Contact us page only we have used wffm form. I saw in browser it show two jquery js file and jquery ui. Can you please guide me how to avoid this. Can you please suggest how to orgainze js file in that page?
    • Comment by Zachary Kniebel on Dec 05, 2016
      Have a look at the documentation for "jQuery.noConflict". Basically, when you call "jQuery.noConflict" you are saying that you want to use the first version that was loaded onto the page. If your jQuery was loaded first then this will mean that your jQuery will be used after calling jQuery.noConflict, and vice versa. Documentation: https://api.jquery.com/jquery.noconflict/