CODEWITHSUNDEEP
javascriptjqueryzurb-foundationprototypejs
michael
michael

Reputation: 21

Foundation, jQuery and Prototype.JS: Dropdown & DropdownMenu not working as intended

I'm trying to use jQuery (2.x.x) and prototype.js (1.7.2), combined with foundation-sites 6 (tried 6.1.2, 6.2.0-rc.1). What has work with foundation 5 ever since leads to strange results now. The first interaction with the dropdown is working as expected, but further interactions increase the offset of the dropdown pane infinitely.

Additionally to jQuery and prototype.js I have these foundation components imported:

Example: https://jsfiddle.net/4pqzmr7k/1/

Here is the callstack which shows the road to the inwards of prototype.js

$ (prototype.js:2048)
show (prototype.js:2168)
_methodized (prototype.js:456)
jQuery.extend.trigger (jquery.js:7825) ==> elem[type]();
(anonymous function) (jquery.js:7875)
jQuery.extend.each (jquery.js:360)
jQuery.fn.jQuery.each (jquery.js:137)
jQuery.fn.extend.trigger (jquery.js:7874)
Dropdown.open (foundation.dropdown.js:333)
(anonymous function) (foundation.dropdown.js:217)

I'm not completely sure if that is a bug in foundation or if I'm just doing it wrong. But with Foundation < 6 all worked fine. If I remove prototype.js all works fine, but I'am not able to do that because it's a dependency in our project.

Upvotes: 0

Views: 333

Answers (1)

Imaginaerum
Imaginaerum

Reputation: 779

Add js:

<script>
/* jQuery no conflict */
jQuery.noConflict();

/* Workaround Foundation / Prototype conflicts */
if (Prototype.BrowserFeatures.ElementExtensions) {
    var disablePlugins = ['dropdown', 'tooltip', 'drilldown', 'dropdownmenu'];
    var preventPrototypeJS = function (method, disablePlugins) {
        var handler = function (event) {
            event.target[method] = undefined;
            setTimeout(function () {
                delete event.target[method];
            }, 0);
            console.log(method + ' - ' + disablePlugins);
        };
        disablePlugins.each(function (plugin) {
            jQuery(window).on(method + '.zf.' + plugin, handler);
        });
    };
    preventPrototypeJS('show', disablePlugins);
    preventPrototypeJS('hide', disablePlugins);
}
/* */
jQuery(function ($) {
    /* Foundation sites */
    $(document).foundation();
});
</script>

Upvotes: 1

Related Questions