CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapmagentomagento-1.9
Brian
Brian

Reputation: 76

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

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.

Upvotes: 1

Views: 2764

Answers (3)

ChrisKsag
ChrisKsag

Reputation: 134

$( ".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!

Upvotes: 0

ROBIN
ROBIN

Reputation: 502

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 :)

Upvotes: 1

Altair7852
Altair7852

Reputation: 1418

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.

Upvotes: 0

Related Questions