CODEWITHSUNDEEP
twitter-bootstrapcachingpopover
Dominik Vogt
Dominik Vogt

Reputation: 190

bootstrap popover is removed from dom on close

So I have a problem with bootstrap popover in v3.2. I create a popover, with changable content (checkboxes).

$(elem).popover({
    container: 'body',
    trigger: 'manual',
    placement: 'auto top',
    selector: false,
    title: 'Feedback',
    html: true,
    content: htmlOptions,
    template: '<div class="popover popover-feedback" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><small class="popover-subtitle">Was gefällt dir an dem Foto?</small><div class="popover-content"></div></div>
});

htmlOptions contains the html with the checkboxes.

<div class="checkbox right"><label><input type="checkbox" checkbox-id="0" checked>Inspiration</label></div>
<div class="checkbox right"><label><input type="checkbox" checkbox-id="1">Kreativität</label></div>
<div class="checkbox right"><label><input type="checkbox" checkbox-id="2">Komposition</label></div>
<div class="checkbox right"><label><input type="checkbox" checkbox-id="3">Qualität</label></div>

When I hide the popover with $(..).popover('hide'); the popover is removed from dom. When i reopen the popover with $(..).popover('show'); the changed content (eg. checked checkbox) is not shown, because the popover had been removed from dom.

How do I disable the popover being removed from dom?

Upvotes: 3

Views: 1315

Answers (2)

Alexander
Alexander

Reputation: 225

Bootstrap 4

Although this question is 2 years old and asked for BS 3.2 I decided to share my solution because the 'problem' still exists in Bootstrap 4. 

$('#audio-menu, #style-menu').on('hide.bs.popover', function (e) {
var id = $(this).data('bs.popover').tip.id;
if(id) {
    var content = $('#'+id).find('.popover-body');
    var checkboxes = content.find("input[type=checkbox]");
    checkboxes.each(function(){
        var checkbox = $(this);
        var checked = checkbox.prop('checked');
        checkbox.attr('checked', checked);
    });
    $(this).attr('data-content', content.html());
}

});

As you can see, I've implemented two popovers (audio-menu and style-menu). Everytime the hide event is fired, you'll get the ID of the hiding popover by extracting it from the data attribute. (In my case I have to check if the ID is not empty, because my popover('hide') is fired by other functions too, even the popover isn't shown. So maybe you can leave that out).

Keep in mind, that "this" isn't your popover as it is represented it the DOM. In my case its a button filled with the data-content attribute. To get the content of 'the real' popover we can use the ID and search the DOM. In the next step you can do the checkbox handling as described by Dominik Vogt below. Afterwards you can save your modified content in the data-content attribute again.

Upvotes: 2

Dominik Vogt
Dominik Vogt

Reputation: 190

The solution to this is changing $(elem).data('bs.popover').options.content on 'hide.bs.popover' according to the changed elements. For this I need to check for the checked checkboxes.

So instead of not removing the object from dom, we can update the content inside the popover object.

So in total the answer is

$(elem).on('hide.bs.popover', function (e) {
    var popover = $(this);
    var popoverContent = popover.data('bs.popover').$tip.find('.popover-content');
    var checkboxes = popoverContent.find("input[type=checkbox]");
    checkboxes.each(function(){ 
        var checkbox = $(this);
        var checked = checkbox.prop('checked');
        checkbox.attr('checked', checked);
    });
    popover.data('bs.popover').options.content = popoverContent.html();
});

Upvotes: 0

Related Questions