4

I created a fiddle for Collapse feature of Twitter Bootstrap using the markup from the demos on your page that works: http://jsfiddle.net/Rymd7/1/

Then once, I add in a reference to prototypejs collapse functionality stops working on each accordian group after clicking through it a couple of times. http://jsfiddle.net/p5SAy/1/ I'm not sure what the issue is or how to correct it.

Is this a bootstrap issue or is there a way to get around this and have these two js libraries exist on the same page?

I have tried jQuery noConflict with no success, but any help is appreciated. If you can send me back a working fiddle that would be great...or any insight.

Thanks. -John

4
  • These two fiddles are identical. Did you mean to do that?
    – davehale23
    Commented Oct 3, 2012 at 19:35
  • github.com/twitter/bootstrap/issues/5403 - is it yours?
    – Victor
    Commented Oct 5, 2012 at 8:49
  • @davehale23 The two fiddles are different. As posed in the original question, the 2nd one has a reference to prototype.js. You will see it under managed resources. Commented Oct 5, 2012 at 16:07
  • @Victor Yes that is my question on github. Commented Oct 5, 2012 at 16:07

2 Answers 2

17

You are using jQuery and Prototype simultaneously without jQuery.noConflict(). After

<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.js'></script>
<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/prototype/1.7.0/prototype.js"></script>

this line was causing javascript error:

$(window).load(function(){

Revised fiddle: http://fiddle.jshell.net/ymbsr/5/ - open http://fiddle.jshell.net/ymbsr/5/show/ in different browsers.

P.S.

After removing jQuery/Prototype conflict I can see that ih Chrome 21 and Opera 12.02 accordion transition never ends (in bootstrap-collapse.js Collapse.transition initiates transition but complete() is never called). Further invocations of Collapse.show()/hide() on the same element are exiting after if (this.transitioning) return.

In Firefox 15.0.1 accordion works fine.

P.P.S.

This strange behavior is a consequence of two features:

  1. this.$element.trigger('hide') (in Collapse#transition()) tries to invoke $element.hide() if method hide() is present in element - that's by design:

    Note: For both plain objects and DOM objects, if a triggered event name matches the name of a property on the object, jQuery will attempt to invoke the property as a method if no event handler calls event.preventDefault(). If this behavior is not desired, use .triggerHandler() instead.

    With Prototype in each browser supporting HTML element prototype extensions $element will definitely have hide() method, which actually hides element via setting element.style.display = 'none'.

  2. In current versions of Chrome and Opera transition end event (one of webkitTransitionEnd, oTransitionEnd, otransitionend) will not fire if element is hidden (has display: none style). Firefox ends its transition more successfully, but also may not fire event under some circumstances:

    Note: The "transitionend" event doesn't fire if the transition is aborted because the animating property's value is changed before the transition is completed.

How to fix it:

  1. File a bug for bootstrap-collapse.js - it shouldn't rely only on transition end event

  2. File a bug for bootstrap-collapse.js - its hide event intersects with other frameworks (at least with Prototype, but any other framework extending element prototypes may be affected).

  3. Temporarily patch Collapse#transition() from bootstrap-collapse.js as in http://fiddle.jshell.net/ymbsr/7/ - either disable event triggering or change event names.

    jQuery.fn.collapse.Constructor.prototype.transition = function (method, startEvent, completeEvent) {
      var that = this
        , complete = function () {
            if (startEvent.type == 'show') that.reset();
            that.transitioning = 0;
            that.$element.trigger(completeEvent);
          }
      //this.$element.trigger(startEvent);
      //if (startEvent.isDefaultPrevented()) return;
      this.transitioning = 1;
      this.$element[method]('in');
      (jQuery.support.transition && this.$element.hasClass('collapse')) ?
          this.$element.one(jQuery.support.transition.end, complete) :
          complete();
    };
    
9
  • Thank you so much for your reply. I have added in jQuery.noConflict() if you can take a look at this : fiddle.jshell.net/ymbsr/3/show . The broken behavior still exists and the javascript errors are gone. Commented Oct 4, 2012 at 21:09
  • 1
    More correct version: fiddle.jshell.net/ymbsr/5 - each node shows/collapses only once, next clicks are not working. No script errors. Strange enough. Will look into it.
    – Victor
    Commented Oct 5, 2012 at 7:15
  • fiddle.jshell.net/ymbsr/6 - either without bootstrap-transition.js or without prototype collapse works fine - IMHO this is conflict between transition and prototype and should be asked on bootstrap support forum
    – Victor
    Commented Oct 5, 2012 at 8:37
  • Yes. That is about is far as I have gotten. I cannot figure out what the issue is with transitions. Our business has a need for them to glide smoothly like that, so I'm curious to resolve this issue if possible. I posted the question on github, but they closed the issue as it is a compatibility issue of managing two different javascript libraries and is not solely a Bootstrap issue on its own. I may have to just find a different jQuery accordion that does not conflict, but I was posting here hoping that someone might be able to help. Thanks for yours! Commented Oct 5, 2012 at 16:12
  • 3
    @Victor - if I'm understanding you correctly, that the problem is that trigger is causing some prototype extensions to fire, wouldn't the simplest patch be to replace this.$element.trigger(startEvent); with this.$element.triggerHandler(startEvent);? That seems to work, but I'm not sure if I'm missing something. Commented Nov 10, 2012 at 3:45
0

I am using Magento and have had bootstrap/ prototype problems for years. I tried all of the above without luck. Ha you will not believe what worked!

I moved prototype as one of the first scripts to be loaded and left all of the others to be loaded after. That worked for me. I dont know why I didnt try the earlier.

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.