CODEWITHSUNDEEP
javascriptjquerytwitter-bootstraptwitter-bootstrap-3popover
Trufa
Trufa

Reputation: 40717

How to keep content of bootstrap popover after hiding it, or how to really hide it

It has come to my attention that the boostrap popover when hidden seems to destroy the content and redo it when you show it.

Please take a look a this example.

If you write on the input, hide the popover and show it again, the input will be empty.

Shouldn't it just not display it and then show it again, without using the content?

What's the best way to avoid that? Do I have to display: none the popover myself, or is there a bootstrap way?

Note that I'm not interested in storing and keeping the text of the input, that's not the point of this question, I want to keep the html as it is because of a jquery plugin that is loaded and activated inside.

Upvotes: 3

Views: 5728

Answers (4)

user1442605
user1442605

Reputation: 192

I stumbled on this question and ended up making my own solution so that I could use a color picker. It is similar to Holt's answer except it actually shifts the HTML in question between two different parent divs, one of which is hidden. This way, any changes the user made are preserved.

With this code you would have the HTML starting within #color-picker-popover-parentwhich is a hidden div. I have only tried it in Bootstrap v3.

$('.color-button').popover({
        html: true,
        content: '<div id="color-picker-popover-temp-parent"></div>',
        title: '',
        placement: 'bottom'
    }).on('hide.bs.popover',function(){
        $('#color-picker-popover').detach().appendTo('#color-picker-popover-parent');
    }).on('inserted.bs.popover',function(){
        if($('#color-picker-popover-temp-parent').length)
        {
            $('#color-picker-popover').detach().appendTo('#color-picker-popover-temp-parent');
        }

    });

Upvotes: 0

dotcomly
dotcomly

Reputation: 2214

I had a similar need. I am using popover to display an in place edit form field. Once the value was saved, if you clicked the popover again the same source HTML was copied and the old value was selected. I played with setting the value on update and a few other things and nothing worked or I was not happy with the result.

I came up with this solution where instead of letting the show/hide events trigger I manually show and hide the popover.

$(document).on('click', '.ajax-value', function() {
    // We only want to init the popover once
    if (typeof $(this).data('bs.popover') == "undefined") {
        // Init the popover and show immediately
        $(this).popover({
            'content': $(this).closest('.ajax-edit').find('.ajax-field').html(),
            'html': true,
            'title': $(this).attr('data-title'),
            'placement': 'auto'
        }).popover('show');

        // Hook into show event and return false so parent does not run
        $(this).on('show.bs.popover', function () {
            return false;
        });

        // Same for hide, don't let parent execute
        $(this).on('hide.bs.popover', function () {
            return false;
        });
    } else {
        // If we already created popover, just toggle hidden class
        $(this).closest('.ajax-edit').find('.popover').toggleClass('hidden');
    }
});

// This is a custom close button in the popover
$(document).on('click', '.ajax-field-close', function(){
    // Just add the hidden class
    $(this).closest('.ajax-edit').find('.popover').addClass('hidden');
});

Upvotes: 3

sevmusic
sevmusic

Reputation: 126

Why not clone the HTML and use that as your content?

<a href="#" rel="popover" data-popover-content="#myPopover">My Popover</a>

$('[rel="popover"]').popover({
    container: 'body',
    html: true,
    content: function () {
        var clone = $($(this).data('popover-content')).clone(true).removeClass('hide');
        return clone;
    }
})

Upvotes: 1

Holt
Holt

Reputation: 37606

It is not possible to only 'hide' the popover using default bootstrap, event the .popover('hide') will destroy HTML popover (while .popover('destroy') destroy the popover property from the element).

I think the best way to deal with that is to save what you want to save when the popover is hidden and to replace it when the popover is shown. You can do that using the popover event: shown.bs.popover and hide.bs.popover.

// By default, your popover content is empty, and you got somewhere a <div id="mypopovercontent"></div> which is hidden

$('a').on('shown.bs.popover', function (e) {
    $(this).data('bs.popover').$tip.find('.popover-content')
         .html('')
         .append($('#mypopovercontent')) ;
    $('#mypopovercontent').show();
}) ;

$('a').on('hide.bs.popover', function (e) {
    $('body').append($('#mypopovercontent')) ;
    $('#mypopovercontent').hide();
}) ;

I didn't check the code above, but you get the idea!

Upvotes: 1

Related Questions