using interactive elements inside a bootstrap popover

using interactive elements inside a bootstrap popover

I am successfully using a bootstrap popover on a link click. I have some form elements inside the popover: a textfield, checkbox and a button. I’m able to attach a button listener using jquery.live(), but inside that button listener I don’t seem to have any access to the correct form elements. They exist if I trace them out in a console log, but their values always remain the original defaults, so if I go $(‘#txtComment’).val(); the string is always the same, regardless of what I put into the field.
Are there any examples, tutorials or source code I could look at of something that is using any kind of interactivity inside a bootstrap popover?
this is how I’m setting up the popover:
this.commentLink.popover({
trigger: ‘manual’,
placement: ‘right’,
html : true,
content: function () {
return $(‘#commentPopout’).html();
}
}).popover(‘hide’);

//jquery.on won’t work here so we use live
$(‘#btnSubmitComment’).live(‘click’, this.proxy(this.commentSubmitClick));

then I’m doing this to successfully show it:
this.commentLink.popover(‘show’);

and this is the button click function:
commentSubmitClick: function(e){
console.log($(‘#txtComment’).val());//always shows default text regardless of what I’ve actually typed in the field
}

Related:  How to get dynamic data-offset values for Bootstrap 3 affix method

Solutions/Answers:

Solution 1:

The syntax changed. The answer of Kalin C Ringkvist needs to be slightly modified:

var popover = this.commentLink.data('popover').tip();

Note the method tip() instead of $tip.

Solution 2:

Yay! figured it out. Why, oh why is this not documented? I miss working in actionscript.

var popover = this.commentLink.data('popover').$tip;
var comment = popover.find('#txtComment').val();//gives correct string

This code must be run while the popover is actually visible, since the elements don’t exist when it’s not visible.

-Oh, and using jquery.live() is deprecated, but you can use this $tip variable to get the button reference instead once the popover is created.

Solution 3:

For a variable number of buttons/links that have events binded, here’s how I did it (going off what’s been answered previously):

var list = $('<ul/>');
myCollections.items.each(function(item){
    var row = $('<li/>');
    row.append(item.get('id')));
    row.append($('<a/>').addClass('delete').html('remove'));
    list.append(row);
});

$(this.el).find('a').popover({ content: list }).on('click', function(){
    var popover = $(this).data('popover').tip();
    $(popover).find('.delete').on('click', removeitem);
});

function removeitem(){ // code to remove the item here }

// The HTML (in the popover) would look like this:
<ul>
    <li>1<a class="delete">remove</a></li>
    <li>2<a class="delete">remove</a></li>
    <li>3<a class="delete">remove</a></li>
</ul>

Solution 4:

I used another trick to be able to attach functions to the elements in the popover. I just added another click listener on the element that displays the popover. In the click listener a function with some timeout is started (for example 500 milliseconds). After the function is started, you should be able to access your popover elements. Here is the code:

        <!-------- HTML ----------->
        <a class="btn" id="popover_btn">show popover</a>

        /******* JAVASCRIPT *******/
        $('#popover_btn').popover({
            html: true,
            placement: 'top',
            trigger: 'click',
            title: 'add new value',
            content: '<input id="ttt" type="text"/>'
        });

        $('#popover_btn').click(function() {
            setTimeout(function() {
                // here you can write your "ON SHOW" code
                console.debug($('#ttt').length);        // Outputs 1 - the element is there
            }, 500);
        });

Related:  Bootstrap Modal popping up but has a “tinted” page and can't interact

References