Search code examples
jquerytwitter-bootstrappopoverbootstrap-multiselect

How to put a multiselect in a popover?

I want to insert a multiselect (from multiselect bootstrap plugin) in a popover (from popover bootstrap plugin).

Unfortunately, the multiselect is not correctly initialized and the result is a classic bootstrap multiselect box :

The multiselect is a bootstrap multiselect and not a multiselect-bootstrap plugin multiselect

Here is my code :

<html>
<head>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-multiselect.css">
</head>

<body>

<button id="mypopover" type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content='
        <div class="btn-group">
            <select class="form-control multiselect" multiple="multiple">
                <option>Choice 1</option>
                <option>Choice 2</option>
                <option>Choice 3</option>
            </select>
            <button class="btn btn-default" type="button">&nbsp;<span class="glyphicon glyphicon-remove"></span>&nbsp;</button>
            <button class="btn btn-primary" type="button">&nbsp;<span class="glyphicon glyphicon-ok"></span>&nbsp;</button>
        </div>
    ' data-title="Filter">
    My popover
</button>


<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-multiselect.js"></script>
<script src="js/bootstrap-tooltip.js"></script>
<script src="js/bootstrap-popover.js"></script>
<script>  
    $(function() {
        // Popover
        $("#mypopover").popover({
            trigger:'click', 
            html:true, 
            content:function(){return $("#popover-content").html();}}
        );
        $('.multiselect').multiselect();
    }); 
</script>

</body>
</html>
Solution

  • I found this way :

    <script>  
    $(function() {
        $("#mypopover").popover({
            trigger:'click', 
            html:true, 
            content:function(){return $("#popover-content").html();}}
        ).on('click',function () {
            $('.multiselect').multiselect();
        });  
    }); 
</script>

    It is probably better using the event "show.bs.popover".