multiple bootstrap popovers with unique ids- not working on shown event

Question

I am trying to create and initialize multiple popovers, using the same code. The html element is being created in JS-

var panel = ('<a href="javascript://" id= "'+popId+'" data-title="xyz" >');

popId is a unique value for each so the ids getting assigned are unique

Next I am calling the following function-

createPopOver("#"+popId,<another_arg>);

The create function looks like this-

function createPopOver(selector,<another_arg>) {
  $(selector).popover({
    trigger: 'click',
    placement : 'left'
  }).on('shown.bs.popover', function () {
    console.log("reached here1"+selector);
    ...
  });
}

debugging through the control goes to the function however not inside the shown event and so the console does not print anything.

If I give an id="xyz" so now all the popovers have the same id, the very first popover will show up on clicking but with incorrect text (the content to display is being computed in the create popover function).

I see that you are trying to create dynamic `popovers`. When you are attaching `panel` to `DOM`? Could you please post complete `js` relating to this? — Guruprasad J Rao, Apr 18 '17 at 17:02

score 0 · Answer 1 · edited May 23 '17 at 10:31

First of all, I have a strong feeling that you are initializing popover by calling createPopOver function, before you attach elements to DOM, which ain't gonna work. Because event's can be attached to the elements only when it gets attached to the DOM. Alongside, id isn't necessary to attach popover. You can make use of class which can be given to multiple elements, or you can make use of rel or data-* attributes.

var panel = ('<a href="javascript://" id= "'+popId+'" rel="popover" data-title="xyz" >');

Now you can write createPopOver function without the selector argument and popover has selector option where you can specify the selector and attach the popover to body.

function createPopOver(<another_arg>) {
  $('body').popover({
    trigger: 'click',
    placement : 'left',
    container: 'body',
    selector: '[rel="popover"]', //considering rel as common attribute here
  }).on('shown.bs.popover', function () {
    console.log("reached here1"+$(this).attr('id'));
    ...
  });
}

You can call createPopOver once your contents of panel variable gets attached to the DOM.

There are various other ways to work on with. Do refer this answer for a detailed explanation on other options.

Thank you so much! yes you are right I was trying to initialize the popover before attaching it to DOM and that was causing the issue. — newjersey2017, Apr 18 '17 at 18:26
@newjersey2017 Anytime.. Happy Coding.. Do accept the answer if it helped.. :) — Guruprasad J Rao, Apr 18 '17 at 18:27

score 0 · Accepted Answer · answered Apr 18 '17 at 17:20

Be careful when you create your popovers and when you initialize them.

function createPopOver(selector,another_arg) {
   console.log(selector);
  //$(selector).popover();
  $('[data-toggle="popover"]').popover({

  }).on('shown.bs.popover', function () {
    console.log("reached here1"+selector);
  });  
}


$(document).ready(function(){
    var panel = $('<p><a href="javascript://" id= "123" data-toggle="popover" title="Popover title" data-content="And here\'s some amazing content. It\'s very engaging. Right?" >123</a></p>');
     $('body').append(panel);
     panel = $('<p><a href="javascript://" id= "234" data-toggle="popover" title="Popover title 234" data-content="And here\'s some amazing content. It\'s very engaging. Right? 234" >234</a></p>');
     $('body').append(panel);
     panel = $('<p><a href="javascript://" id= "345" data-title="xyz" >345</a></p>');
     $('body').append(panel);
     panel = $('<p><a href="javascript://" id= "456" data-title="xyz" >456</a></p>');
     $('body').append(panel);      
    createPopOver("#123",'');
    createPopOver("#234",'');
    createPopOver("#456",'');

 });

https://jsfiddle.net/v761q32b/

Thank you so much! I was initializing before attaching it to the DOM which was the real issue. Your snippet really got me into thinking. — newjersey2017, Apr 18 '17 at 18:28

multiple bootstrap popovers with unique ids- not working on shown event

2 Answers2