javascript - How to Create Bootstrap Popover on JQuery DataTable Dynamically - Stack Overflow

admin管理员组

文章数量:1417434

So I have a table that is being filled with data from an ajax call. I'm just using append similar to this for filling it:

var table = //something

//loop through ajax response objects
table.append('<tr><td>' + ajaxAnswer[i].part1 + '</td><td>' + ajaxAnswer[i].part2 + '</td></tr>');

After the loop I'm initializing a datatable like so:

table.dataTable(
    //set the paging parameters
);

Now what I'd like to do is have a popover happen whenever a row in that table has been clicked. However, the popover will feature some extra data (loaded in by another ajax call). I've got the jquery for capturing the click event, making my call, and assembling all the data, but I can't seem to get the popover to occur correctly. I've attempted adding the syntax of it to each row I append like so:

table.append('<tr class="popover-dismiss" data-toggle="popover"><td>' + ajaxAnswer[i].part1 + '</td><td>' + ajaxAnswer[i].part2 + '</td></tr>');

Along with this bit wrapped in a closure to process the popover (I want the popover to disappear upon a click anywhere outside so I've used the focus element here as per the bootstrap guide here, ):

$('.popover-dismiss').popover({
    trigger: 'focus'
});

That didn't seem to work however. It could be that the popover is being hidden underneath my datatable since I didn't see any particular error. So now I need either some other way to add it onto my rows or a way to generate them dynamically. Again, I've left out the jquery that handles my generating event so I can throw it from there if I knew how to instantiate it on the fly. Seems like I'm missing something trivial here. Thanks for any help!

UPDATE:

Twitter Bootstrap Popovers not working for Dynamically Generated Content

I happened upon this post about dynamically generating popovers (finally something relevant after many past googlings) which could be my problem. Will test tomorrow when I get back to work.

So I have a table that is being filled with data from an ajax call. I'm just using append similar to this for filling it:

var table = //something

//loop through ajax response objects
table.append('<tr><td>' + ajaxAnswer[i].part1 + '</td><td>' + ajaxAnswer[i].part2 + '</td></tr>');

After the loop I'm initializing a datatable like so:

table.dataTable(
    //set the paging parameters
);

Now what I'd like to do is have a popover happen whenever a row in that table has been clicked. However, the popover will feature some extra data (loaded in by another ajax call). I've got the jquery for capturing the click event, making my call, and assembling all the data, but I can't seem to get the popover to occur correctly. I've attempted adding the syntax of it to each row I append like so:

table.append('<tr class="popover-dismiss" data-toggle="popover"><td>' + ajaxAnswer[i].part1 + '</td><td>' + ajaxAnswer[i].part2 + '</td></tr>');

Along with this bit wrapped in a closure to process the popover (I want the popover to disappear upon a click anywhere outside so I've used the focus element here as per the bootstrap guide here, http://getbootstrap./javascript/#popovers):

$('.popover-dismiss').popover({
    trigger: 'focus'
});

That didn't seem to work however. It could be that the popover is being hidden underneath my datatable since I didn't see any particular error. So now I need either some other way to add it onto my rows or a way to generate them dynamically. Again, I've left out the jquery that handles my generating event so I can throw it from there if I knew how to instantiate it on the fly. Seems like I'm missing something trivial here. Thanks for any help!

UPDATE:

Twitter Bootstrap Popovers not working for Dynamically Generated Content

I happened upon this post about dynamically generating popovers (finally something relevant after many past googlings) which could be my problem. Will test tomorrow when I get back to work.

• javascript
• jquery
• ajax
• twitter-bootstrap
• datatables

Share Improve this question Follow edited May 23, 2017 at 11:51 CommunityBot 111 silver badge asked Aug 7, 2014 at 5:43 eholder0eholder0 31233 silver badges1515 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

This ended up being the answer I needed for future reference (all of this inside the jquery function for handling my click event on the row):

$(row).popover({
    trigger: 'focus',
    title: 'YourTitleHere',
    html: 'true',
    content: blah,
    placement: 'top'
});
$(row).popover("toggle");

$(row) is my row object that I'm setting the popover on and blah is the content I want in it (in this case some formed up html div, but you can do the same with text by removing the html: 'true' param above).

In my previous attempts, I had used the content tag as required, but I didn't have the last line to actually toggle the popover to on myself. Doing it this way required no addition to the row definitions I'm appending.

Credit to the post I linked in the original post for specifying where the popover handler should be and also to this post (Bootstrap popover content cannot changed dynamically) for the toggle part I was missing to drive it all.

本文标签： javascriptHow to Create Bootstrap Popover on JQuery DataTable DynamicallyStack Overflow