AppGini V5.40 - Bootstrap 3.3.4 & Prototype.js conflict
Posted: 2015-05-26 02:43
Updated to Appgini V5.40 and found that Bootstrap tabs, pills, dropdowns and some other javascript functions that had been working in Appgini 5.31 suddenly stopped working!
Bootstrap elements "disappeared" when clicked. I identified the problem to be a "display: none;" style tag being added to the elements when clicked.
After 3 days of pulling my hair out, I finally identified the issue to be resources/lightbox/js/prototype.js. To cut the story short, there is an identified conflict with Bootstrap V3.3.x and Prototype.js.
See here: http://www.softec.lu/site/DevelopersCor ... peConflict for the problem, the cause and suggested workarounds.
I actually opted for another simple solution as the workarounds above did not work for me(?). I replaced the Appgini version of resources/lightbox/js/prototype.js with a Bootstrap friendly version of prototype.js found here: https://raw.githubusercontent.com/zikul ... ototype.js
Apart from these bootstrap compatibility changes to prototype.js that are listed here: https://github.com/zikula/core/commit/0 ... 768e1f0554 I also edited the isBootstrapEvent variable (found on line 9) to include the code below which fixes Bootstraps tabs & pills:
PS: Thanks for Appgini V5.40 Ahmad. An excellent upgrade and well worth the very nominal fee you charge.
Bootstrap elements "disappeared" when clicked. I identified the problem to be a "display: none;" style tag being added to the elements when clicked.
After 3 days of pulling my hair out, I finally identified the issue to be resources/lightbox/js/prototype.js. To cut the story short, there is an identified conflict with Bootstrap V3.3.x and Prototype.js.
See here: http://www.softec.lu/site/DevelopersCor ... peConflict for the problem, the cause and suggested workarounds.
I actually opted for another simple solution as the workarounds above did not work for me(?). I replaced the Appgini version of resources/lightbox/js/prototype.js with a Bootstrap friendly version of prototype.js found here: https://raw.githubusercontent.com/zikul ... ototype.js
Apart from these bootstrap compatibility changes to prototype.js that are listed here: https://github.com/zikula/core/commit/0 ... 768e1f0554 I also edited the isBootstrapEvent variable (found on line 9) to include the code below which fixes Bootstraps tabs & pills:
Code: Select all
var isBootstrapEvent = false;
if (window.jQuery) {
jQuery('*').on('hide.bs.dropdown', function( event ) {
isBootstrapEvent = true;
});
jQuery('*').on('hide.bs.collapse', function( event ) {
isBootstrapEvent = true;
});
jQuery('*').on('hide.bs.modal', function( event ) {
isBootstrapEvent = true;
});
jQuery('*').on('hide.bs.tab', function( event ) {
isBootstrapEvent = true;
});
jQuery('*').on('hide.bs.pill', function( event ) {
isBootstrapEvent = true;
});
}