8

I'm willing to set up Bootstrap Popover to show the emails list that have been sent to the user. The content is therefore dynamically generated via an ajax call. Here is my piece of code :

    $('#liste').on('mouseover', 'tr[data-toggle=popover]', function(e) {
        var $tr = $(this);
        id = $(this).data('id');
        $.ajax({
            url: '<?php echo $this->url(array(), 'loadRelance');?>',
            data: {id: id},
            dataType: 'html',
            success: function(html) {
                $tr.popover({
                    title: 'Relance',
                    content: html,
                    placement: 'top',
                    html: true,
                    trigger: 'hover'
                }).popover('show');
            }
        });
    });

As you can see, it'll trigger an ajax call on each mouseover on the <tr>'s of the <table>. As it works perfectly when the page is loaded for the first time, when I make a change in the number of mail sent, it doesn't show the updated list when I do over it again (it works if I reload the page of course). I can see in the preview of XHR requests in the Chrome Developper Toolbar the updated list but it doesn't load it in the content of the popover. It keeps the old list.

Any help would be much appreciated. Thanks!

Siguza
  • 21,155
  • 6
  • 52
  • 89
D4V1D
  • 5,805
  • 3
  • 30
  • 65
  • 1
    You are creating a new popover for each mouseover. You should use $tr.popover('destroy'); $tr.popover({options}).popover('show'); – Catalin MUNTEANU Apr 14 '14 at 09:21
  • Many thanks! Adding `$tr.popover('destroy');` right before the `ajax` call did the trick! – D4V1D Apr 14 '14 at 09:28

1 Answers1

10

You should destroy the existing popover using:

$tr.popover('destroy');

Then create the new popover using your code:

$tr.popover({options}).popover('show');
Catalin MUNTEANU
  • 5,618
  • 2
  • 35
  • 43