CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrap
Matthew Pearl
Matthew Pearl

Reputation: 3

Only first popover is working

(There is one similar question I found here but I don't think the answer applies to me, or if it does I don't understand how to implement it)

To start, I should say I am not a programmer or designer, I used an open source template made with Bootstrap (called Grayscape) to put up my own site. Meaning: I have no idea what I'm doing. But I try my best and try to read up and learn as I go.

However, I can't figure this out. You'll see on a test version of my page that there are book covers in the third section (it's a one page layout). I want popovers for each book cover. The first cover's popover works. But only the first one works. Even though the code is the same for the others (I've only put code for the next two book covers, so far).

In the JS script I have this initialization:

$(document).ready(function(){
$(function() {
$('.bookovers').popover();
});

and then at the bottom before the last body tag I have:

$('#popover').popover();

Then around the items that have the popovers I have:

<a id="popover" class="btn" rel="popover" data-content="Summary text."
              title="title text"
              data-html="true"></a>

It wouldn't be hard to confuse me. However, this is one of the last things I need to do to have this page set up and running, and I just can't for the life of me figure out or find why only the first popover works. I experimented and did a popover earlier in the page on some text, and, again, only the first one worked (in other words, the one that had been first, on the first cover, and was now the second one, no longer worked). Any help would be greatly appreciated, but please note I would probably need pretty specific guidance.

Thanks!

Upvotes: 0

Views: 778

Answers (3)

Benjamin Ray
Benjamin Ray

Reputation: 1870

If you add a class (e.g. 'myclass') to each element that you want to be a popover, and call popover() on all objects with that class, each object will have its own popover that appears when you click. That is what I have done with the HTML and JavaScript below.

Also, it looks like you had a duplicate $(function() { in your JavaScript.

HTML with multiple popovers (note the "myclass" class):

<a class="btn myclass" rel="popover" data-content="Summary text." title="title text" data-html="true">Popover</a>

<a class="btn myclass" rel="popover" data-content="Summary text." title="title text" data-html="true">Popover</a>

<a class="btn myclass" rel="popover" data-content="Summary text." title="title text" data-html="true">Popover</a>

JavaScript (note the $('.myclass') selector):

$(document).ready(function () {
    $('.bookovers').popover(); // Only necessary if you actually have objects with class "bookovers"
    $('.myclass').popover(); // Makes popover for all elements with class "myclass"
});

Demo:

http://jsfiddle.net/BenjaminRay/3ear7ea6/

PS - If you add the class "myclass" (or whichever name you choose) to the elements that already have the class 'bookovers', you can remove the line $('.bookovers').popover(); from the JavaScript.

Upvotes: 1

zfrisch
zfrisch

Reputation: 8660

Instead of:

<a id="popover" class="btn" rel="popover" data-content="Summary text."
          title="title text"
          data-html="true"></a>

Try this:

<a class="btn popover" rel="popover" data-content="Summary text."
          title="title text"
          data-html="true"></a>

and instead of this:

$("#popover").popover();

Try This:

$(".popover").popover();

The reasoning behind this is because each id is considered to be a unique attribute assigned only to that specific item. By assigning the same id to multiple elements often times there will be mixed results and things may not work properly.

Classes, however, are built on the idea that multiple elements may be grouped together. By adding the class "popover" we can point to those specific elements or select them by using a specific selector. What's a selector? Well When you do this: 

$("#popover").popover();

'#popover' is telling the document to look for an id called "popover". Similarly

$(".popover").popover();

'.popover' is telling the document to look for a class called "popover"

Upvotes: 1

Gary Henshall
Gary Henshall

Reputation: 72

Can you change the id to each specific popover instead of having the same function for all of them?

Maybe #popover1 #popover2 etc?

Just an idea..

Edit: For example i had a Bootstrap Modal which only pop up the first one until i changed the id to Modal1, Modal2 etc.. This then worked.

Upvotes: -1

Related Questions