Bootstrap 4 Popper.js: как динамически обновлять содержимое всплывающего окна? - PullRequest
Новая
       4

Bootstrap 4 Popper.js: как динамически обновлять содержимое всплывающего окна?

0 голосов
/ 02 ноября 2018

Я пытаюсь обновить HTML-содержимое всплывающего окна с popper.js с помощью html-контента, возвращаемого в ajax с сервера.

Всплывающее окно создается при загрузке страницы. В HTML: 

<a id="upvote-637" title="Popup" 
   data-toggle="popover" 
   data-content="<ul><li>item 1</li><li>Item 2</li></ul>" 
   data-remote="true" 
   href="/posts/637/upvote">
       Link text
</a>

В JavaScript: 

$('[data-toggle="popover"]').popover({
  trigger: 'hover', 
  html: true
});

Я хотел бы обновить содержимое динамически. Я попробовал: 

// This is working to Toggle display
$("#upvote-637").popover('toggle') 
// This is not working to update the content  dynamically 
$("#upvote-637").popover('toggle')[0].dataset.content = "TEST";

1 Ответ

0 голосов
/ 17 февраля 2019

Вы можете использовать Tippy.js, который использует Popper.js в качестве основного движка, как Tooltip.js.

С Tippy.js это проще (он был создан для простой загрузки данных через ajax ): 

tippy('#ajax-tippy', {
  content: 'Loading...',
  animateFill: false,
  animation: 'fade',
  flipOnUpdate: true,
  onShow(instance) {
    // call ajax; then use instance.setContent(responseText);
  },
})
...