Bootstrap 4.3.1 Popover не отображает таблицу внутри содержимого Popover - PullRequest
Новая
       15

Bootstrap 4.3.1 Popover не отображает таблицу внутри содержимого Popover

4 голосов
/ 26 марта 2019

У меня Bootstrap 4.3.1 Popover с таблицей, встроенной в контент.Все отображается, но таблицы нет.В приведенном ниже коде я попробовал как функцию для content, так и непосредственно $('#a02').html(). 

$("[data-toggle=popover]").popover({
    html: true,    
    content: function() { return $('#a02').html(); },  // Also tried directly without function
    title: 'Test'
  }).click(function() {
	  $(this).popover('show');
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>


<a href="#" data-toggle="popover" data-trigger="focus" data-placement="right">
   Click Here for Popover
</a>

<div id="a02" style="display: none;">
   Some text before table
   <div>
      <table width="100%">
          <thead>
              <th>Column 1</th>
              <th>Column 2</th>
              <th>Column 3</th>
          </thead>
          <tbody>
              <tr>
                  <td>1</td>
                  <td>2</td>
                  <td>3</td>
              </tr>
          </tbody>
      </table>
   </div>
</div>

Некоторые люди пытались показать мне JSFiddle, который работает с Bootstrap 3. Я взял их JSFiddle и просто изменил ссылки Bootstrap на 4, и он сломался. Bootstrap 3 JSFiddle | Bootstrap 4 JSFiddle

Ответы [ 3 ]

12 голосов
/ 27 марта 2019

Всплывающие подсказки и всплывающие окна используют встроенное дезинфицирующее средство для очистки параметров, которые принимают HTML

https://getbootstrap.com/docs/4.3/getting-started/javascript/#sanitizer

попробуйте это: 

$(function() {
    $.fn.popover.Constructor.Default.whiteList.table = [];
    $.fn.popover.Constructor.Default.whiteList.tr = [];
    $.fn.popover.Constructor.Default.whiteList.td = [];
    $.fn.popover.Constructor.Default.whiteList.div = [];
    $.fn.popover.Constructor.Default.whiteList.tbody = [];
    $.fn.popover.Constructor.Default.whiteList.thead = [];

  $("[data-toggle=popover]").popover({
    html: true,
    content: function() {
      var content = $(this).attr("data-popover-content");
      return $(content).children(".popover-body").html();
    },
    title: function() {
      var title = $(this).attr("data-popover-content");
      return $(title).children(".popover-heading").html();
    }
  });
});
1 голос
/ 26 марта 2019

Для некоторых как таблица не работает внутри popover, но вы можете использовать другие теги, такие как ul.Я просто обновляю с ul Я надеюсь, что это поможет вам.Спасибо 

$("[data-toggle=popover]").popover({
    html: true,    
    content: function() { return $('#a02').html(); },  // Also tried directly without function
    title: 'Test',
  }).click(function() {
	  $(this).popover('show');
  });
.popover-html ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.popover-html ul li {  
    display: inline-block;
    white-space: nowrap;
    width: 33%;
}

.popover-html ul li + li {
  padding-left: 5px;
}  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>


<a href="#" data-toggle="popover" data-trigger="focus" data-placement="right">
   Click Here for Popover
</a>

<div id="a02" style="display: none;">
   Some text before table <div class='popover-html'><ul><li>Column 1</li><li>Column 2</li><li>Column 3</li></ul><ul><li>1</li><li>2</li><li>3</li></ul></div>

Еще одна опция, которую вы можете добавить HTML в data-content атрибут.Спасибо 

$("[data-toggle=popover]").popover();
.popover-html ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.popover-html ul li {  
    display: inline-block;
    white-space: nowrap;
    width: 33%;
}

.popover-html ul li + li {
  padding-left: 5px;
}  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>


<a tabindex="0"
   class="btn btn-lg btn-primary" 
   role="button" 
   data-html="true" 
   data-toggle="popover" 
   data-trigger="focus" 
   title="Test" 
   data-content="Some text before table<div class='popover-html'><ul><li>Column 1</li><li>Column 2</li><li>Column 3</li></ul><ul><li>1</li><li>2</li><li>3</li></ul></div>">Click Here for Popover</a>
1 голос
/ 26 марта 2019

вы можете сделать это следующим образом: 

$(function() {
  $("[data-toggle=popover]").popover({
    html: true,
    content: function() {
      var content = $(this).attr("data-popover-content");
      return $(content).children(".popover-body").html();
    },
    title: function() {
      var title = $(this).attr("data-popover-content");
      return $(title).children(".popover-heading").html();
    }
  });
});


<!-- Popover #1 -->
<a href="#" class="btn btn-primary" tabindex="0" data-toggle="popover" data-trigger="focus" data-popover-content="#a1" data-placement="right">Popover Example</a>


<!-- Content for Popover #1 -->
<div id="a1" class="hidden">
  <div class="popover-heading">Title</div>
  <div class="popover-body">
    <table style="width:100%">
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
    </table>
  </div>
</div>

Ссылка на документацию Popover Bootstrap 4.0 ОБНОВЛЕНИЕ: Обновлен JSFiddle

...