This question already has answers here:
need click twice after hide a shown bootstrap popover
(8 answers)
Closed 6 years ago.
I've got a Bootstrap popover which contains an element with JS that when clicked, closes the popover using the manual method as shown on the Bootstrap website, i.e.
$('#element').popover('hide')
However, it then takes two clicks on the element the popover is opened from to re-open it. It's as if it still thinks the popover is on show and so the first click is to toggle it closed and the second click then toggles it open again. Does anyone know how to properly close a popover using JS to avoid this? I've created the following fiddle that demonstrates the problem.
http://jsfiddle.net/fxqzn4xd/1/
Thanks very much.
Update: This issue isn't a duplicate of the proposed question
Thanks as always to the SO community for keeping the place tidy and relevant. However, this isn't a duplicate of the proposed question. The problem in that question was that the popovers weren't initialised until the first click. Therefore, the first click did not open the popover, but did initialise it so the second and all subsequent clicks worked.
That is not the problem I found. Popovers are initialised on page load so my first click does open the popover. When closed using the manual .popover('hide') method, the second click then does not work. i.e. every other click works in my scenario. These are different issues caused by different problems. The issue in the linked post is to initialise popovers before the first click, which I already do.
I reported the issue I found on the twbs bootstrap project on GitHub and it turns out it is a known bug, first reported in version 3.3.5 back in July. It had a milestone fix of 3.3.6 but this slipped (3.3.6 came out recently) and now has a milestone of 3.3.7. Full details on Github here:
Calling .popover('hide') prevents popover from open on next click #18860
Good news though, there is a simple workaround that can be applied while waiting for it to be committed to 3.3.7. I'll post it as a solution.
Update 2
Agreed: this is a duplicate of the newly proposed 'duplicate of' question. Looks like the asker encountered the issue just before me! I'll leave the question here though as clearly I (and others) didn't find that one at the time of looking so hopefully it can be of help.
Thanks go to GitHub user 'julesongithub' for providing this workaround. Putting this on the same page as a popover you wish to close using .popover('hide') solves the issue. Essentially it works by resetting the 'inState.click' variable for the popover which the hide method isn't doing.
$('body').on('hidden.bs.popover', function (e) {
$(e.target).data("bs.popover").inState.click = false;
});
The workaround I use is the click() function on the element that fires the popover, because of the following rationale: You just want to 'hide' the popover when it is being shown and the element to show the popover is also the element to hide it. That being said, click() will make it disappear. Instead of
$('#element').popover('hide')
I use
$('#element').click()
It works well so far...
I fixed this by changing the trigger option when instantiating the popover.
$('#element').popover({ trigger: 'manual' });
Note that the this option requires you to both show and hide the popover.
Source Thread
More popover options
Related
Ive been stuck on this for a while now.
I have an API of a LIST that I want to display, each one of the objects on the list needs to be cliackable and a MODAL should appear with the LIST OBJECTS info ''pokemon height'', 'pokemon name'' and ''pokemon type''. The MODAL should also be CLOSED when clicking ESC or outside of the MODAL.
The thing is, I believe I added all the codes correctly but everytime I find an error, or the list simply disappears. I fix an error and another one appears, when there is no errors it simply just doesn't work. I am sorry if that is a rather simple thing to do but I am brand-new to programming and I am trying to learn.
It just seems that everytime I ''correct'' something, I get further away from the correct way of doing it. PLEASE if somebody could take a look in what I've done and give me some tips or point what should be done here. THANKS
HERE IS THE LINK TO MY "PROJECT":
added functions to loadDetails, loadList, addListItem (it worked)
then by adding the MODAl, CLOSE MODAL, HIDE MODAL, it just doesnt answer accordingly
This question already has answers here:
Bootstrap Accordion button toggle "data-parent" not working
(7 answers)
Closed 6 years ago.
I'm using the Bootstrap 3 Collapse Accordion Example.
I've noticed that when using the javascript .collapse() methods, the accordion effect seems to be acting unexpected.
See this simple jsfiddle example.
Here I'm using $('#collapseOne').collapse('toggle');. Why? Because to demonstrate the following behavior:
Initially because of this piece of JavaScript, panel #1 gets expanded.
Clicking on panel #2 gives us the accordion effect as one would expect.
Clicking back on panel #1 gives an unexpected behavior in that both panels now are expanded.
Now if you remove the javascript and execute the following steps:
Click on panel #1 to expand
Click on panel #2 to get the accordion effect.
Clicking on panel #1 again, still gives us the accordion effect.
The observation here is that when using the .collapse('toggle') method, the accordion effect seems to be broken?
Would one expect this to break or might this be a bug?
No there isn't any bug because in JavaScript you are toggling the collapse panels which removes the in class which actually opens the collapse panel.And i guess there comes the problem.
So, just remove in class from #collapseOne everything will work normal with that piece of your JavaScript code.
Hope it solves your issue.
Here is working fiddle
=EDIT=
Yes, it is a bug!
Solution is in this post and the fixed jsfiddle is here.
The following function to change the text of an input box works perfectly. but when I try and fire it again with a different parameter, it does not change.
function changeForm(name)
{
$("#the-input-box").val(name);
}
This also happens when I try change the selectedIndex on a select tag.
Also, the form is located on a modal box using Twitter's bootstrap, could that be the issue?
Any suggestions?
I think it's the way you are using the modal box. I've experienced the exact same thing before.
The thing about the id attribute is that there can only be ONE at any given time within the HTML DOM.
You may want to check whether you are 'destroying' your modal box after closing it. The first time you open the modal box, calling the function works without any problems. There could be a chance that after opening the modal box again, the function doesn't work anymore. This is because you are spawning multiple instances of the modal box and this causes multiple instances of #the-input-box to appear in the DOM.
Give that a try and let me know. The key is to DESTROY the modal box when it is closed (maybe closing it is fine, but I prefer the more drastic approach of destroying).
I have made a jQuery accordion menu but it doesn't seem to be acting in the default manner. Basically, when I click on a menu item the item opens as expected. However, when I click on a different menu item it also opens as expected but the first menu item remains open. The jQuery documentation states:
"An accordion doesn't allow more than one content panel to be open at the same time, and it takes a lot of effort to do that."
I promise it took very little effort to break this default functionality ;). Anyway, I have posted my JS, HTML and CSS on JSFiddle and am hoping someone can point me in the right direction. Other than opening and closing it works fine, even though it doesn't appear to on JSFiddle. Here's the link: JSFiddle Post
Thanks in advance.
Ken
Can You Organize your output page in the way that I at least can see the menu clearly. Its difficult to access the them in your html
I have a page which is having some link and when i click on that link it open a tool tip form that also contains some link and now i want to open another form within already opened tool tip. Is there any possible way? Please help.
I had the same problem yesterday. What I realized is that a tooltip is a very specific thing and you are not supposed to show two tooltips at once or nest them. In my case, displaying the second tooltip closed the container and none was visible.
My solution was to replace the container tooltip with a JQuery UI dialog which made more sense and then use the tooltips inside.