I have set some attributes to my button with some bootstrap elements, however when I click the button for the first time it didn't work. I need to click somewhere outside the button, and click the button again.
I had solve this by calling the function in onload and call it again in button, but now I'm in a situation that I can't do that anymore, so I was wondering is there any other ways to solve the problem?
Here is my code: https://jsfiddle.net/a22177861/x381z0h6/6/
HTML:
<button type="button" class="btn btn-warning" onclick="PopOver(this,'Hi','Thank','You');">ClickMe！</button>
JS:
function PopOver(myObj, mgr, Adate, Vdate) {
$(function () {
myObj.setAttribute("data-container", "body");
myObj.setAttribute("data-toggle", "popover");
myObj.setAttribute("data-placement", "bottom");
myObj.setAttribute("data-html", "true");
myObj.setAttribute("data-trigger", "focus");
myObj.setAttribute("title", "otherInfo");
myObj.setAttribute('data-content', "MGR："+mgr+"<br />DATE1："+Adate+"<br />DATE2："+Vdate);
$("[data-toggle='popover']").popover();
});
}
Any help would be greatly appreciated!
This $('[data-toggle="popover"]').popover() in your code initializes the popover, so you have to click twice to trigger it.
According to Bootstrap's popover documentation:
Reveals an element’s popover. Returns to the caller before the popover has actually been shown (i.e. before the shown.bs.popover event occurs). This is considered a “manual” triggering of the popover. Popovers whose both title and content are zero-length are never displayed.
You can use .popover('show') to manually trigger the popover.
It will be like this:
function PopOver(myObj, mgr, Adate, Vdate) {
myObj.setAttribute("data-container", "body");
myObj.setAttribute("data-toggle", "popover");
myObj.setAttribute("data-placement", "bottom");
myObj.setAttribute("data-html", "true");
myObj.setAttribute("data-trigger", "focus");
myObj.setAttribute("title", "otherInfo");
myObj.setAttribute('data-content', "MGR："+mgr+"<br />DATE1："+Adate+"<br />DATE2："+Vdate);
$("[data-toggle='popover']").popover('show');
}
I suggest you write your code in a friendlier way. Some dead fields can be written directly in HTML
<button type="button" class="btn btn-warning" data-container="body" data-toggle="popover" data-trigger="focus" data-placement="bottom" data-html="true" title='otherInfo' onclick="PopOver(this,'Hi','Thank','You');">ClickMe！</button>
function PopOver(myObj, mgr, Adate, Vdate) {
myObj.setAttribute('data-content', "MGR："+mgr+"<br />DATE1："+Adate+"<br />DATE2："+Vdate);
$("[data-toggle='popover']").popover('show');
}