Обновление содержимого bootstrap popover дает успешный вызов ajax

Question

Когда я нажимаю на целевой div, я хочу, чтобы отображалось popover (я могу показать ярлык загрузки в качестве содержимого), и в то же время запрос на отправку ajax отправляется сервер для извлечения данных. Как только данные вернутся, я хочу обновить этот уже открытый popover.

Вот мой код:

$(document).on('click', '.row-client', function (e) { 

     var id = $(this).attr('id'); 

     var str = id.split('-'); 
     var component = str[0]; 
     var clientId= str[1]; 

     $.ajax({ 
      url: '../Clients/Index', 
      type: 'GET', 
      data: { clientId: clientId }, 
      dataType: 'html', 
      success: function (data) { 

       $('.popper').popover({ 
        placement: 'bottom', 
        container: 'body', 
        html: true, 
        content: data 
       }); 
      }, 
      error: function (xhr, status, error) { 
       alert(xhr.responseText); 
      } 
     }); 
}); 

Проблемы я сталкиваюсь с это:

1. поповер не отображается автоматически при первом щелчке или при загрузке данных. Мне нужно продолжать нажимать. Как только данные будут возвращены и загружены, popover будет отображаться на «следующем» клике. Почему это так?

2. Есть ли способ сохранить открытку и обновить содержимое автоматически после получения данных?

3. При следующем нажатии, чтобы поднять popover, я хочу, чтобы содержимое было пустым (это не сейчас). Что мешает этому?

Answer 1

Звонок в $(). Popover не отображает popover. Это добавляет поведение popover в элемент DOM. То, что заставляет его появляться позже, - это щелчок, в зависимости от «триггера», который вы настраиваете для popover.

Попробуйте использовать $ ('. Popper'). Popover(), как только документ будет готов.

И изменить содержимое пирога, в то время как это показано, попробуйте следующее:

$('.popper').attr("data-content","new content"); 
$('.popper').data('bs.popover').show();