11

I've got a v7.2 site which is using Web Forms for Marketers v2.4 rev 151103 (WFFM) for some forms. I am seeing some errors in our javascript that I strongly suspect is related to the fact that WFFM is including an old version of jQuery.

What is the accepted way to handle this? Our code, as an example, trying to use the .on method to adjust an iFrame height, but this wasn't added until jQuery 1.7 (WFFM includes 1.4.2)

    $('.modal-body iframe').on('load', function() {
        this.style.height = 0;
        this.style.height = this.contentWindow.document.body.scrollHeight + 'px';
    });

Update

I've tried .noConflict(), but this only solves the issue on pages I have the Form rendering on (and therefore two versions of jQuery). Is there a way to get WFFM 2.4 to no output the reference to jQuery? I know later versions have settings to supress using Bootstrap.

Improve this question
1
  • 1
    ddysart I've added another option for you in my updated answer below.
    – Adam Seabridge
    Commented Oct 11, 2016 at 22:31

4 Answers 4

Reset to default
8

You should look at jQuery.noConflict(). Use this jQuery method in your JS to avoid conflicts with WFFM included jQuery libs

UPDATE:

In response to your updated question: no, there is no way to tell WFFM not to use jQuery, but because jQuery registers itself as an AMD module, you should be able to check to see if jQuery is already on the page before you call jQuery.noConflict(). You can do this using the following code:

if (typeof window.jQuery != 'undefined') {
    // now call noConflict and any other logic
}

You will likely want to run that script in a $(window).load(...) handler

Improve this answer
2
  • This only seems to work if WFFM is on the page (which isn't the case for every page)
    – Derek Dysart
    Commented Oct 4, 2016 at 21:21
  • I like that approach. Seems cleaner than hacking the module.
    – Derek Dysart
    Commented Oct 5, 2016 at 2:10
1

2 ways we have handled this in the past if the .noConflict() approach doesn't work for you (I have had trouble with it).

1.) include the newer jQuery library later in the DOM than the WFFM include for instance with in the body tag.

or

2.) give your newer jQuery a global var other than the bling ($) and use that in your code.

Improve this answer
1

Not super proud of the approach, but I ended up looking for the version of jQuery WFFM injects (1.4.2 in this case) and unloaded it.

if (typeof jQuery != 'undefined' && jQuery.fn.jquery == "1.4.2") {
    jQuery.noConflict(true);
}

Ended up going this route, as it also fixed some other js errors caused by this collision (Zachary's answer was close, but in some of my callback functions, the version of jQuery was wrong).

Not a fan of the magic string, but it worked in this case.

Improve this answer
0

Have you tried deleting the Jquery version referenced by WFFM from the file system? From memory this should prevent WFFM adding it to the page. You should then just be able to include your own jquery version in your page layout (at the correct point) and you should be good to go - assuming WFFM 2.4 doesn't require this exact version of JQuery.

Also are you running a Web Forms or Sitecore MVC Site?

-- Update --

Another option might be to use HTML Agility Pack to parse the HTML and strip some script tags out of the page. I've done this kind of thing in the past and I believe older versions of Sitecore / WFFM shipped with this dll anyway.

Here is an example of removing script tags (replace the sample html with the html from the page):

 HtmlAgilityPack.HtmlDocument doc = new HtmlAgilityPack.HtmlDocument();
        string sampleHtml = 
            "<html>" +
                "<head>" + 
                        "<script type=\"text/javascript\" src=\"jquery.js\"></script>" +
                        "<script type=\"text/javascript\">" + 
                            "if (window.self === window.top) { $.getScript(\"Wing.js\"); }" +
                        "</script>" +
                "</head>" +
            "</html>";
        MemoryStream ms = new MemoryStream(Encoding.ASCII.GetBytes(sampleHtml));

        doc.Load(ms);

        List<HtmlNode> nodes = new List<HtmlNode>(doc.DocumentNode.Descendants("head"));
        int childNodeCount = nodes[0].ChildNodes.Count;
        for (int i = 0; i < childNodeCount; i++)
            nodes[0].ChildNodes.Remove(0);
        Console.WriteLine(doc.DocumentNode.OuterHtml);

Mike Reynolds has an example of using HTML agility pack with WFFM here also:

https://sitecorejunkie.com/2013/07/28/add-javascript-to-the-client-onclick-event-of-the-sitecore-wffm-submit-button/

Improve this answer
1
  • It's web forms. I was thinking of replacing the version on the file system, but will give this a try.
    – Derek Dysart
    Commented Oct 5, 2016 at 2:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.