How do I change the contents of a popup that has already been displayed?

Question

I have a form with a password entered twice. I check the complexity and consistency of the passwords and display the corresponding error messages in the popsor attached to the INPUT field:

<a href="#" id="aIdPwd2" data-toggle="manual" data-content="The password entered does not match the one previously entered" data-placement="right" href="#" rel="popover"> <input type="password" id="iIdPwd2" class="fmt1" size="60" value=""/> </a> 

With this code:

 $("#aIdPwd2").popover({content: msg}); 

You can select a dynamic message to be displayed. But as soon as it is displayed once, it will always remain unchanged.

I read many articles about this popular issue and tried many things (attached 2 different popover to the same input, changed the internal html to getElementsByClassName ("popover-content"), destroyed and recreated the popover, ..), but without any or success.

A decision on how to change the contents of a boot popup that has already been displayed, or any kind of work, would be much appreciated.

Answer 1

 document.getElementsByClassName("popover-content")[0].innerHTML = 'something else'; 

sure this won't work?

tried it on this page and it works as expected.

UPDATE: it will only work if the popover is visible because the item is recreated / destroyed by each mouseover / mouseout event

I think this is not the best solution, but you can do it:

 var msg = 'ben123 is not a goddamn password!'; document.getElementById('password').addEventListener('mouseover', function() { document.getElementsByClassName("popover-content")[0].innerHTML = msg; }); 

and change msg when you need

Answer 2

On Twitter Bootstrap 3, I just update the content and then call show . The show call ensures that it is correctly modified and positioned correctly.

 $(".notes").data("bs.popover").options.content="Content1"; $(".notes").popover("show"); $(".notes").data("bs.popover").options.content="Content2"; $(".notes").popover("show"); 

If you use data tags to display content, you need to update the data tag as this takes precedence. eg.

 $(".notes").attr("data-content","Content1"); $(".notes").popover("show"); $(".notes").attr("data-content","Content2"); $(".notes").popover("show"); 

I like the second option better, because it does not have access to internal elements, making data(bs.popover) , but the first parameters are much faster since it does not update dom. So choose what floats on your boat.

Answer 3

To replace the contents of a popover on an element, first call destroy. Tested on Bootstrap 3.1.1

 $("#aIdPwd2").popover('destroy').popover({content: msg}); 

Answer 4

The problem with solutions that rely on popover('show') is that if you do this in the event handler for the show event, you will get an infinite loop.

If you just want to display some content in your popover when it has already been shown, you will need to directly modify the DOM:

 $("#aIdPwd2").next(".popover").find(".popover-content").html(msg); 

For example, if you want popover to load some data from the API and display this in popover content on hover:

DOM:

 <a href="#" id="myPopover" data-toggle="popover" data-title="Details" data-api-parameter="someValue">Hover here for details</a> 

JQuery

 $("#myPopover").popover({ trigger: 'hover' }).on('shown.bs.popover', function () { var popover = $(this); var contentEl = popover.next(".popover").find(".popover-content"); // Show spinner while waiting for data to be fetched contentEl.html("<i class='fa fa-spinner fa-pulse fa-2x fa-fw'></i>"); var myParameter = popover.data('api-parameter'); $.getJSON("http://api.example.com", { 'apiParameter': myParameter }).done(function (data) { var result = data['apiReturnValue']; contentEl.html(result); }).fail(function (data) { result = "No info found."; contentEl.html(result); }); }); 

This, of course, assumes that you trust the data provided by api.example.com. If not, you probably want to avoid the data returned to reduce XSS attacks.