Zurb Foundation 5 and Jquery 3 incompatible?

Question

I am trying to use Zurb Foundation 5 with JQuery 3.0.0.1 and seem to be having some compatibility issues. When I initialize Foundation $(document).foundation(); a javascript error is thrown

Object doesn't support property or method 'indexOf' on line 9612

If I roll back to 2.2.4 everything works fine. Has anyone else run into this?

Browser: MS Edge(IE 11)

Just check the first 20 lines.... https://wiki.bath.ac.uk/display/webservices/Foundation+5+-+Things+to+be+aware+of — Hackerman, Jul 15 '16 at 15:43
That wiki article addresses Jquery 2 it doesn't address JQuery 3 — John S, Jul 15 '16 at 16:12

score 6 · Accepted Answer · edited May 23 '17 at 12:00

Yes, Zurb Foundation 5 and jQuery 3 are incompatible. Foundation still uses the load function, which was deprecated 4 years ago in jQuery 1.8 and finally removed in jQuery 3.0. Since there is another jQuery Function called load, which is called instead, you get this rather cryptic error message.

Even the current relased Version of Zurb Foundation 6.2.3 and jQuery 3 are incompatible. The fix for your problem is already merged and should be released with version 6.2.4 which was to be released about 2 months ago, but still isn't. (Its 78% complete according to the GitHub page)

So I guess the only solution is to a) ignore the error or b) patch the code yourself as described in this answer.

Update: Foundation 6.2.4 was released October 21, 2016 and now supports jQuery 3.

Thanks a bunch, this saved me a lot of headaches! The current easiest solution is downgrade jQuery to 2.2.4, if you can. — Aleksandar Dimitrov, Oct 03 '16 at 11:50

score 0 · Answer 2 · answered Feb 18 '22 at 08:41

You can work around that with a snippet like this:

// XXX Hack for foundation for jQuery upgrade from 2.x to 3.x
jQuery.fn.load = function (callback) {
    this.on('load', callback);
    return this;
};

Typescript:

import jQuery from 'jquery';

// XXX Hack for foundation for jQuery upgrade from 2.x to 3.x
var jQueryAny = (jQuery as any).fn;
jQueryAny.load = function(cb:any) {
    this.on('load', cb);
    return this;
}

Zurb Foundation 5 and Jquery 3 incompatible?

2 Answers2