Bootstrap-select.js - After selecting an option, entire select disappears

Question

Im trying to set up bootstrap-select.js for my website that Im working on (Magento ver. 1.9.1.0), and Im having some problems I cant solve.

Everything gets loaded perfect, but when I select an option in the dropdown select list, the entire select disappears by getting an element.style onto it like this:

style="display:none;"

And in FireBug it says:

element.style { display: none; }

See visual image here: http://i.imgur.com/cg1jkOp.jpg?1

The problem is I dont know where this styling is coming from, so I decided to check 'Break on attribute change' in FireBug and see what it said. The code came from Jquery (jquery-2.1.3.min.js) as you can see in this image: http://i.imgur.com/Jbu8TCx.jpg?1

This is what I have in my <head> section:

<link rel="stylesheet" href="http://localhost/sg-magento/skin/frontend/ultimo/default/css/bootstrap/bootstrap.min.css"> <link rel="stylesheet" href="http://localhost/sg-magento/skin/frontend/ultimo/default/css/bootstrap/bootstrap-select.min.css"> <script type="text/javascript" src="http://localhost/sg-magento/js/infortis/jquery/jquery-2.1.3.min.js"></script> <script type="text/javascript" src="http://localhost/sg-magento/skin/frontend/ultimo/default/js/bootstrap/bootstrap.min.js"></script> <script type="text/javascript" src="http://localhost/sg-magento/skin/frontend/ultimo/default/js/bootstrap/bootstrap-select.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function($) { $('.selectpicker').selectpicker(); }); </script>

Where do I go from here? How do I solve this problem? Seems like such a small thing, but it's really getting on my nerves now. Been trying to figure it out for a long time now.

Hope there are someone willing to try to help.

Thanks.

ROBIN · Accepted Answer · 2016-07-19 11:50:49Z

This because for Bootstrap and Prototype conflict. See more details here. Create a new JS file and Add the following Code in it.

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);}

Have fun :)

Altair7852 · Accepted Answer · 2015-08-16 23:42:00Z

0

I had similar issue, when select was disappearing on submission and re-render of Backbone template. In my case calling $('.selectpicker').selectpicker('render'); fixed it.

answered Aug 16, 2015 at 23:42

Altair7852

1,4981 gold badge17 silver badges25 bronze badges

1 Comment

DevOpsSauce Over a year ago

I'm late to the party, but if you get this notification, would you mind telling me where you put that code?

ChrisKsag · Accepted Answer · 2016-07-20 18:39:08Z

$( ".dropdown-menu > ul > li" ).click(function() { $( '.bootstrap-select').attr('style', ''); $( this ).parent( '.bootstrap-select').attr('style', ''); });

This will override any conflict that cuases this problem. I DO NOT BELIEVE either of the previous answers are correct. AND MINE DEF IS NOT AN ANSWER. But it will solve the problem, until more time can be spent to find the real source of the conflict. Prototype could be the cause, but the prototype answer does not work!

Collectives™ on Stack Overflow

Bootstrap-select.js - After selecting an option, entire select disappears

3 Answers 3

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Related