Bootstrap dropdown conflicting with jQuery.dropdown

Question

I am trying to manually toggle a bootstrap dropdown. This script used to work until recently:

$(function () {
    $('.role-toggler').on('click', function (e) {
        $(this).find('.dropdown-toggle').dropdown('toggle');
        e.stopPropagation();
    });
});

However when I try click the dropdown now I get:

Uncaught Error: Method toggle does not exists on jQuery.dropdown

I am using Material Design for Bootstrap, Bootstrap 3.3.6 and jQuery 2.1.4. I recently updated my packages which included bootstrap and jquery, which may have caused this issue.

try removing jquery ui plugin and see if it works. – Nilesh Mar 29 '16 at 13:57 — Nilesh, Mar 29 '16 at 13:57
I don't use the jquery ui plugin – barnacle.m Mar 29 '16 at 14:46 — barnacle.m, Mar 29 '16 at 14:46

score 1 · Answer 1 · answered May 11 '16 at 18:30

The issue is probably that Bootstrap material design is now using a custom jQuery dropdown plugin which overwrites the bootstrap drowpdown but has a different minimal API.

Try raising an issue mentioning that you expect a bootstrap like API since its a bootstrap theme.

Bootstrap dropdown conflicting with jQuery.dropdown

1 Answers1