CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
user3067058
user3067058

Reputation: 23

How to use Select2 inside a bootstrap popover

I wonder how I get my Select2 dropdown working inside of a Bootstrap popover. I know the issue is that the popover content is loaded after the popover-event-click is initiated, so that the JS-code for the Select2 wont work. I just don't know how to fix it.

Example: http://hammr.co/8234009/6/problems.html

Try pressing "submit" on the fourth problem named "Aaaah!" and you'll get the popover visible. Then try pressing the "Alabama"-dropdown (which is the Select2 dropdown) and it wont work (since the JS isn't initiated because the popover content is loaded after the DOM).

Anyone knows how to make it work?

Upvotes: 1

Views: 2318

Answers (1)

Sumanta
Sumanta

Reputation: 39

yes possible

thanks to bootstrap popover callback modification

/* override bootstrap popover to include callback */

var showPopover = $.fn.popover.Constructor.prototype.show;
$.fn.popover.Constructor.prototype.show = function() {
showPopover.call(this);
if (this.options.showCallback) {
this.options.showCallback.call(this);
}
}

$(this).popover({
container:'#maincont',
placement:'right',
 html : true,
 title: function() {
          return $('#'+pk).html();
        },
  content: function() {

          return $('#'+pk).clone();

        },
        showCallback : function() {

$(".popover-content select").select2({
containerCss : {"display":"block"},   
allowClear: true,
});
},

});

Upvotes: 2

Related Questions