dropdown JS with Prototype 1.7.0 [BUG]

[c-schwan]

hey guys,

I just tested bootstrap3.0 with Prototype 1.7. At the secound click the btn-group is setting to display none.

christian

[cvrebert]

Using Prototype with Bootstrap is not officially supported. See the following part of v3's docs:
https://github.com/twitter/bootstrap/blob/3.0.0-wip/docs/javascript.html#L70

[c-schwan]

He Chris,

I found the same problem @issue #6921

"3.0 uses namespace

var e = $.Event('hide.bs.' + this.type)

That won't solve this issue with Prototype since jQuery will call the canonical event name 'hide' which will still conflict with the Prototype hide() method on the element.

The event name itself needs to change, eg, 'bs:hide.' + this.type (to use Backbone-inspired namespacing)."

why you don't use namespace like moos suggested (Backbone Namespacing)?

Am 03.07.2013 um 18:35 schrieb Chris Rebert notifications@github.com:

Usingg Prototype with Bootstrap is not officially supported. See the following part of v3's docs:
https://github.com/twitter/bootstrap/blob/3.0.0-wip/docs/javascript.html#L70

—
Reply to this email directly or view it on GitHub.

[mdo]

Ask on the mailing list for help with implementation details like this. If you find a particular bug, open a new issue for that. Thanks!

[davidcmoody]

This makes it extremely hard for those of us trying to convert existing applications to Bootstrap and jQuery. Is there any hope of getting this fixed?

[krazyjakee]

just use a click event and add the "open" class to the dropdown container. Then you bypass all the trouble code.

[phaidon]

The event name itself needs to change, eg, 'bs:hide.' + this.type (to use Backbone-inspired namespacing)."

I can confirm that bs:hide would solve the issue.
@mdo: It would be great to get more details why you dont use the backbone-inspired namespacing. Thanks a lot.

just use a click event and add the "open" class to the dropdown container. Then you bypass all the trouble code.

@krazyjakee Can you explain this in more details. Thanks a lot.

[phaidon]

I found a work around to make it running without changing bootstrap: zikula/core@079df47

[ghost]

@phaidon Genius 👍

[dgervalle]

You may found here a complete explanation of this issue and a workaround that do not require patching any framework bootstrap included.

[patrickdavey]

Just a quick comment here - thanks to @dgervalle for his link which led me to the jsfiddle which worked up until bootstrap 3.1.1 (at least), but when I upgraded to 3.3 I needed to add tab into the list of plugins. Modified fiddle here and pasted below.

jQuery.noConflict();
if (Prototype.BrowserFeatures.ElementExtensions) {
  var pluginsToDisable = ['tab', 'collapse', 'dropdown', 'modal', 'tooltip', 'popover'];
  var disablePrototypeJS = function (method, pluginsToDisable) {
    var handler = function (event) {
      event.target[method] = undefined;
      setTimeout(function () {
        delete event.target[method];
      }, 0);
    };
    pluginsToDisable.each(function (plugin) {
      jQuery(window).on(method + '.bs.' + plugin, handler);
    });
  };


  disablePrototypeJS('show', pluginsToDisable);
  disablePrototypeJS('hide', pluginsToDisable);
}

[twbs-lmvtfy]

Hi @patrickdavey!

You appear to have posted a live example (http://fiddle.jshell.net/dgervalle/hhBc6/show/light/), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:

• line 133, column 1: W007: Found one or more <button>s missing a type attribute.
• line 24, column 7: W013: Bootstrap version might be outdated. Latest version is at least 3.3.5 ; saw what appears to be usage of Bootstrap 3.3.2
• line 28, column 7: W013: Bootstrap version might be outdated. Latest version is at least 3.3.5 ; saw what appears to be usage of Bootstrap 3.3.2

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

[twbs-lmvtfy]

Hi @patrickdavey!

You appear to have posted a live example (https://fiddle.jshell.net/crwcbuuk/1/show/light/), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:

• line 133, column 1: W007: Found one or more <button>s missing a type attribute.
• line 24, column 7: W013: Bootstrap version might be outdated. Latest version is at least 3.3.5 ; saw what appears to be usage of Bootstrap 3.3.2
• line 28, column 7: W013: Bootstrap version might be outdated. Latest version is at least 3.3.5 ; saw what appears to be usage of Bootstrap 3.3.2

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)