动态更改bootstrap中popover的内容

Question

我正在尝试动态更改bootstrap popover的内容，但它无法正常工作。 提琴手：https://jsfiddle.net/99x50s2s/62/

HTML：

<button class="btn btn-danger btn-xs" id="SaveChangesBtn" type="button" data-toggle="popover" data-trigger="manual" data-content="There are no changes to save."><span class="glyphicon glyphicon-floppy-save" aria-hidden="true"></span>&nbspSave Changes</button>

JS：

$('#SaveChangesBtn').on('click', function(){
    $(this).popover('hide');
    $(this).popover({content: 'Cannot proceed with Save while Editing a row.'}).popover('show');        
});

当前结果：

点击“保存更改”按钮后，内容“没有更改即可保存＆＃39;显示。

期望：

动态内容＆＃34;编辑行时无法继续保存。＆＃34;应该显示。

感谢任何帮助。

Answer 1

您可以尝试这样的事情：

$('#SaveChangesBtn').on('click', function(){
if($('.popover').hasClass('in')){
    $(this).popover('hide');
}
else
{
    $(this).attr('data-content','Cannot proceed with Save while Editing a row.');
    $(this).popover('show');
}
});

通过这种方式，您可以修复显示和隐藏弹出窗口的方式。

工作小提琴：https://jsfiddle.net/99x50s2s/65/

Answer 2

我可以告诉你我的解决方案;你可以分析它，看它是否有帮助;

$('#popover').on('click', function(e) {
      e.preventDefault();
      e.stopPropagation();

      // get the content based on the basis case;
      if (document.getElementById('checkbox_approval').checked == true) {
        // for the case where it is already checked
        var title = 'De-Activate Feature?';
        var content = 'some other text here. <br><br> ' +
          '<button type="button" onclick="document.getElementById(\'checkbox_approval\').checked=false;' +
          '$(\'#popover\').popover(\'destroy\')">' +
          'De-Activate' +
          '</button>' +
          '<button type="button"  onclick="$(\'#popover\').popover(\'hide\')">' +
          'Cancel' +
          '</button>';
      } else {
        var title = 'Activate Feature?';
        var content = 'some text here. <br><br> ' +
          '<button type="button"  onclick="document.getElementById(\'checkbox_approval\').checked=true;' +
          '$(\'#popover\').popover(\'destroy\')">' +
          'Activate' +
          '</button>' +
          '<button type="button"  onclick="$(\'#popover\').popover(\'hide\')">' +
          'Cancel' +
          '</button>';
      }

      // popover controller
      $(this).popover({
        html: true,
        title: title,
        content: content,
        placement: 'bottom',
        template: '<div class="popover" role="tooltip" style="width:320px;">' +
          '<div class="arrow"></div>' +
          '<h3 class="popover-title"></h3>' +
          '<div class="popover-content"></div>' +
          '</div>'
      }).popover('show');
    });

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



<div class="row">
  <div class="col-lg-12 col-md-12">
    <a id="popover" class="btn btn-danger">Click to toggle popover</a>
  </div>
  <div class="col-lg-12 col-md-12">
  <label>Hidden/vissible chcker for dynamic controll
    <input type="checkbox" disabled="disabled" id="checkbox_approval" name="checkbox_approval">
  </label>
    </div>
</div>

Answer 3

我一直在使用以下方法动态更改Bootstrap 4弹出窗口的内容：

$('#SaveChangesBtn').data('bs.popover').element.dataset.content = 'Cannot proceed with Save while Editing a row.';

我相信，一旦您在页面上初始化了Popover，Bootstrap随后会将所有信息放入数据属性bs.popover中，Bootstrap会使用该数据属性来构建该Popover的内容。

Answer 4

你可以通过javascript设置一个popover只有你想要它是dinamyc，你不必在html中定义字段。

所以删除使按钮变为弹出窗口的html，并使用javascript创建，如下所示：

   <button class="btn btn-danger btn-xs" id="SaveChangesBtn" type="button"  ><span class="glyphicon glyphicon-floppy-save" aria-hidden="true"></span>&nbspSave Changes</button>

所以按钮没有定义工具提示，因为你要用javascript创建

      $('#SaveChangesBtn').on('click', function(){

         $(this).popover({content: 'Cannot proceed with Save while Editing a row.'});

     });

Answer 5

使用Bootstrap 4.5.2和Popper 1.11可以使它正常工作；

var divElem = $('#myPopperDiv');
divElem.data('bs.popover').element.dataset.content = dynamicString;
divElem.data('bs.popover').setContent();

其中dynamicString是每隔一秒更新一次的内容。

注意：要记住的一件事是，divElem.data('bs.popover')在用户第一次单击弹出菜单之后才存在。因为我要在回调中更新它，所以我检查

if(divElem.data('bs.popover')) {
  divElem.data('bs.popover').element.dataset.content = dynamicString;
  divElem.data('bs.popover').setContent();
}

Answer 6

只需从按钮声明中删除“数据内容”属性即可。