0

I am trying to run jquery chosen inside a bootstrap popover, but the initiated chosen dropdown is not clickable.

Here is my code:

html

<button type="button" class="btn btn-md btn-danger" id="popover" data-title="Popover title" >Click to toggle popover</button> <div style="display: none;" id="popovercontent"> <select class="chosen chzn-done"> <option>Choose...</option> <option>jQuery</option> <option selected="selected">MooTools</option> <option>Prototype</option> <option>Dojo Toolkit</option> </select> </div>

JS

$(document).ready(function(){ // init chosen var $chosen = $(".chosen").chosen(); // init popover var $popover = $('#popover').popover({ placement: 'bottom', html: true, content: function () { return $('#popovercontent').html(); }, title: function () { return $(this).data('title'); }, }); // on show popover $popover.on("show.bs.popover", function(e) { console.log('open popover'); $chosen.trigger("chosen:updated"); }); }); // document.ready

https://jsfiddle.net/gdtocsud/

similar question (not answered): Chosen in bootstrap popover not working?

thank you

Bjoern

Improve this question

3 Answers 3

Reset to default
2

try this, may be this will help u

<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.jquery.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.css"> <script> $(document).ready(function() { var $popover = $('#popover').popover({ placement: 'bottom', html: true, content: function() { return $('#popovercontent').html(); }, title: function() { return $(this).data('title'); }, }); $popover.on("shown.bs.popover", function(e) { $('.chzn-done').chosen(); }); $popover.on('hidden.bs.popover', function() { $('.chzn-done').chosen('destroy'); }); }); </script> </head> <body style="padding:25px"> <button type="button" class="btn btn-md btn-danger" id="popover" data-title="Popover title">Click to toggle popover</button> <div id="popovercontent" style='display:none'> <select class="chosen chosen-select chzn-done" > <option>Choose...</option> <option>jQuery</option> <option selected="selected">MooTools</option> <option>Prototype</option> <option>Dojo Toolkit</option> </select> </div> </body> </html>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

Here is the js code :

 $(document).ready(function() { // init chosen //var $chosen = $(".chosen").chosen(); // init popover var $popover = $('#popover').popover({ placement: 'bottom', html: true, content: function() { return $('#popovercontent').html(); }, title: function() { return $(this).data('title'); }, }); // on show popover $popover.on("shown.bs.popover", function(e) { $('.chzn-done').chosen(); }); $popover.on('hidden.bs.popover', function() { $('.chzn-done').chosen('destroy'); }); }); // document.ready

For working code: Here is fiddle link

Similar to chosen with modal the chosen behaviour needs to be initialized after the content is ready, so similar to modal events, you can use the popover events

Improve this answer

1 Comment

This will solve your issue with searching the dropdown elements too.
1

Hi here is the working demo

https://jsfiddle.net/gdtocsud/2/

<div class="panel panel-default"> <div class="panel-body"> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span data-bind="label">Select One</span>&nbsp;<span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Item 1</a></li> <li><a href="#">Another item</a></li> <li><a href="#">This is a longer item that will not fit properly</a></li> </ul> </div> </div> </div>
Improve this answer

1 Comment

I need the chosen plugin to work including searching the dropdown elements. I have dropdowns with 50+ elements and need to search for an element. your solution does not support that.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.