Bootstrap and Prototype.js Conflict

Features of Bootstrap that break: - Collapsible components bounce disruptively due to Effects. - Drop down menus parent disappears upon closing child. - Tooltip trigger/parent disappear on blur. - Popover trigger/parent disappears on blur or toggle. - Tabs disappear on trigger and toggle. With most of these issues, the cause is that Prototype.js applies display:none; to the parent element, making it disappear.
JavaScript • JQuery

Insert the following two code sections after your jQuery.js load, but before your call which is using the prototype.js functions.

jQuery.noConflict();
if (Prototype.BrowserFeatures.ElementExtensions) {
	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);
		});
	},
	pluginsToDisable = ['collapse', 'dropdown', 'modal', 'tooltip', 'popover'];
	disablePrototypeJS('show', pluginsToDisable);
	disablePrototypeJS('hide', pluginsToDisable);
}

Bootstrap dropdown menu disappears when used with prototype.js

Just put code below somewhere after prototype and jquery includes.

(function() {
	var isBootstrapEvent = false;
	 if (window.jQuery) {
		var all = jQuery('*');
		jQuery.each(['hide.bs.dropdown', 
			'hide.bs.collapse', 
			'hide.bs.modal', 
			'hide.bs.tooltip',
			'hide.bs.popover',
			'hide.bs.tab'], function(index, eventName) {
			all.on(eventName, function( event ) {
				isBootstrapEvent = true;
			});
		});
	}
	 var originalHide = Element.hide;
	Element.addMethods({
		hide: function(element) {
			if(isBootstrapEvent) {
				isBootstrapEvent = false;
             				return element;
			}
			return originalHide(element);
		}
	});
})();

Example of usage at the end of a page

<script type="text/javascript">
	
jQuery.noConflict();
if (Prototype.BrowserFeatures.ElementExtensions) {
	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);
		});
	},
	pluginsToDisable = ['collapse', 'dropdown', 'modal', 'tooltip', 'popover'];
	disablePrototypeJS('show', pluginsToDisable);
	disablePrototypeJS('hide', pluginsToDisable);
}
	
/* ----------- RESOLVES THE ISSUE OF THE DROPDOWN MENUS DISAPPEARING ------------ */
(function() {
	var isBootstrapEvent = false;
	 if (window.jQuery) {
		var all = jQuery('*');
		jQuery.each(['hide.bs.dropdown', 
			'hide.bs.collapse', 
			'hide.bs.modal', 
			'hide.bs.tooltip',
			'hide.bs.popover',
			'hide.bs.tab'], function(index, eventName) {
			all.on(eventName, function( event ) {
				isBootstrapEvent = true;
			});
		});
	}
	 var originalHide = Element.hide;
	Element.addMethods({
		hide: function(element) {
			if(isBootstrapEvent) {
				isBootstrapEvent = false;
             				return element;
			}
			return originalHide(element);
		}
	});
})();
	
/* ------- THE FUNCTION BEING CALLED TO UTILIZE PROTOTYPE.JS ------ */
Sortable.create('NewSortOrder', {onUpdate:updateSortOrder})
	
</script>

Written by various sources:
"Bootstrap and Prototype.js Conflict" solution provided by https://www.contrid.co.za/2015/06/fix-bootstrap-3-and-prototype-js-conflict/
"Bootstrap dropdown menu disappears when used with prototype.js" solution provided by https://stackoverflow.com/users/1053931/evgeny-myasishchev

Posted by fbrefere001 on Thursday June 6, 2019