2014-04-14 11 views
8

Jestem gotów skonfigurować Popot Bootstrap, aby pokazać listę e-maili, które zostały wysłane do użytkownika. Zawartość jest zatem dynamicznie generowana przez wywołanie ajax. Tu jest mój kawałek kodu:Twitter Bootstrap Popover z dynamicznie generowanymi treściami poprzez ajax

$('#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'); 
      } 
     }); 
    }); 

Jak widać, będzie to wywołać ajax połączeń na każdym mouseover na „s na <table><tr>. Ponieważ działa idealnie, gdy strona jest ładowana po raz pierwszy, kiedy dokonuję zmiany w liczbie wysłanych e-maili, nie wyświetla ona zaktualizowanej listy, gdy robię to ponownie (działa, gdy przeładowuję stronę oczywiście). Widzę w podglądzie żądań XHR na pasku narzędzi Chrome Developera zaktualizowaną listę, ale nie ładuję jej w treści popover. Zachowuje starą listę.

Każda pomoc będzie mile widziana. Dzięki!

+1

Tworzysz nową popover dla każdego najechaniu myszą. Powinieneś użyć $ tr.popover ('destroy'); $ tr.popover ({options}). popover ('show'); –

+0

Wielkie dzięki! Dodanie '$ tr.popover ('destroy');' tuż przed wywołaniem 'ajax' zadziałało! – D4V1D

Odpowiedz

10

Należy zniszczyć istniejący popover używając:

$tr.popover('destroy'); 

Następnie należy utworzyć nową popover przy użyciu kodu:

$tr.popover({options}).popover('show'); 
Powiązane problemy