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!
Tworzysz nową popover dla każdego najechaniu myszą. Powinieneś użyć $ tr.popover ('destroy'); $ tr.popover ({options}). popover ('show'); –
Wielkie dzięki! Dodanie '$ tr.popover ('destroy');' tuż przed wywołaniem 'ajax' zadziałało! – D4V1D