CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
JGV
JGV

Reputation: 5187

Dynamically change content of popover in bootstrap

I am trying to change the content of bootstrap popover dynamically but it is not working. Fiddler: 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');        
});

Current Result:

When Save changes button is clicked, the content 'There are no changes to save' is displayed.

Expectation:

The dynamic content "Cannot proceed with Save while Editing a row." should be displayed.

Any help is appreciated.

Upvotes: 6

Views: 50470

Answers (6)

Ahmed Matem Ahmed
Ahmed Matem Ahmed

Reputation: 41

Just remove 'data-content' attribute from button declaration.

Upvotes: 0

Hermes
Hermes

Reputation: 2898

Using Bootstrap 4.5.2 with Popper 1.11 I was able to get it working using;

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

where dynamicString is content that is updated every 1 second using an interval.

Note: One thing to keep in mind, is the divElem.data('bs.popover') doesn't exist until after the first time the user click's the pop-over button. since I'm updating it in a callback, I check

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

Upvotes: 1

AmigaAbattoir
AmigaAbattoir

Reputation: 749

I have been dynamically changing content of Bootstrap 4 popovers using something like this:

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

I believe once you initialize the Popovers on your page, Bootstrap then puts all the information into the data attribute bs.popover which Bootstrap uses to build the content of that popover.

Upvotes: 1

Thanatos11th
Thanatos11th

Reputation: 198

I can show you my solution; You may analize it, see if it helps;

$('#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>

Upvotes: 1

Luis Cardenas
Luis Cardenas

Reputation: 363

you can set a popover by javascript only if you want it to be dinamyc , you dont have to define the fields in the html.

so delete the html that make the button a popover , and create with javascript, like this:

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

so the button is not defining the tooltip, because you are going to create with javascript

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

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

     });

Upvotes: 2

Hackerman
Hackerman

Reputation: 12305

You can try something like this:

$('#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');
}
});

This way you fix the way you are showing and hiding your popover.

Working fiddle: https://jsfiddle.net/99x50s2s/65/

Upvotes: 20

Related Questions