0

I am not able to figure out how to display dropdown in popover in bootstrap. All i can find tutorials are just displaying just text and buttons. I need to display dropdown and also have to bind data in it. To display buttons and for its events i have followed the below way.

 var popOpts = {
        placement: 'left',
        title: '<span id="trashcan" class="glyphicon glyphicon-trash"></span>Confirm Delete',
        html: 'true',
        trigger: 'click',
        content: '<p>This will be deleted.<br>Are you sure you wish to continue?</p><br><button id="delete" class="btn btn-danger popover-submit" type="button">Yes</button><button id="cancel" class="btn btn-default" type="button">No</button>',
    }
    $(".btnDelete").popover(popOpts);

I need to know how to display dropdown and to bind items in popover in bootstrap.

amphetamachine
  • 27,620
  • 12
  • 60
  • 72
RGR
  • 1,521
  • 2
  • 22
  • 36

1 Answers1

1

Try like this

You can display anything inside form,and bind the events

HTML

<div class="popover-markup"> <a href="#" class="trigger">Popover link</a> 
    <div class="head hide">Lorem Ipsum</div>
    <div class="content hide">
        <div class="form-group">
            <select><option>Test</option></select>
        </div>
        <button type="submit" class="btn btn-default btn-block">Submit</button>
    </div>
    <div class="footer hide">test</div>
</div>

Script

$('.popover-markup>.trigger').popover({
    html: true,
    title: function () {
        return $(this).parent().find('.head').html();
    },
    content: function () {
        return $(this).parent().find('.content').html();
    }
});

DEMO

Sridhar R
  • 20,190
  • 6
  • 38
  • 35
  • yeah.just now figured out this way from this answer http://stackoverflow.com/questions/12128425/contain-form-within-a-bootstrap-popover?rq=1. Thanks for your answer :). – RGR Mar 28 '14 at 06:02