Dynamic popover - use same popover for different content

Have done this with Bootstrap modals with success but having an issue with framework7 dynamic popover. I want to to load unique content into a dynamic popover depending on the link. I am using data-attributes in the link for the popover content to load.

here is the popover link html:

<a role="button" class="link dynamic-popover" data-drugname="Acepromazine" data-drugcategory="<span class='badge badge-primary'>Tranquilizer</span>" data-druginfo="<dl><dt>Info:</dt><dd>Restraint, Sedative, Mild hypotensive effects at 0.1 mg/kg SC, often accentuated if IV, older patients, or systemic illness</dd><dt>Indication:</dt><dd>Phenothiazine Tranquilzation</dd><dt>Route:</dt><dd>IV,IM,SC</dd></dl>"><i class="fa fa-info-circle fa-lg"></i></a>

When using this code, I just get the a popover without any content change with each click:

 var dynamicPopover = app.popover.create({
 targetEl: 'a.dynamic-popover',
  content: '<div class="popover">'+
          '<div class="popover-inner">'+
            '<div class="block">'+
              '<p class="modal-title"></p>'+
              '<p class="modal-body"></p>'+
              '<p class="modal-footer"></p>'+
              '<p><a href="#" class="link popover-close">Close</a></p>'+
            '</div>'+
          '</div>'+
        '</div>',
        on: {
    open: function () {
    console.log('Popover opened');

 var button = $(dynamicPopover.targetEl); // Button that triggered the modal
 var name = button.data('drugname');
var info = button.data('druginfo');
var drugcategory = button.data('drugcategory');
var modal = $(dynamicPopover.el)
modal.find('.modal-title').text(name)
modal.find('.modal-body').html(info)
modal.find('.modal-footer').html(drugcategory)
console.log(drugcategory)
}
}
});

With this code, I get the unique content in each popover, but the position of the popover is all over the page, not near the link clicked:

$$('.dynamic-popover').on('click', function () {
var dynamicPopover = app.popover.create({
 targetEl: 'a.dynamic-popover',
 content: '<div class="popover">'+
          '<div class="popover-inner">'+
            '<div class="block">'+
              '<p class="modal-title"></p>'+
              '<p class="modal-body"></p>'+
              '<p class="modal-footer"></p>'+
              '<p><a href="#" class="link popover-close">Close</a></p>'+
            '</div>'+
          '</div>'+
        '</div>',
        on: {
  open: function () {
  console.log('Popover opened');

 var button = $(dynamicPopover.targetEl); // Button that triggered the modal
var name = button.data('drugname');
 var info = button.data('druginfo');
var drugcategory = button.data('drugcategory');
 var modal = $(dynamicPopover.el)
 modal.find('.modal-title').text(name)
modal.find('.modal-body').html(info)
 modal.find('.modal-footer').html(drugcategory)
  }
}
});
dynamicPopover.open();   
});

Any help on this would be appreciated!

Hi, try the code bellow

$$('.dynamic-popover').on('click', function () {
	var button = $$(this);
	var dynamicPopover = app.popover.create({
	 targetEl: button,
	  content: '<div class="popover">'+
	          '<div class="popover-inner">'+
	            '<div class="block">'+
	              '<p class="modal-title">' + button.data('drugname') + '</p>'+
	              '<p class="modal-body">' + button.data('druginfo') + '</p>'+
	              '<p class="modal-footer">' + button.data('drugcategory') + '</p>'+
	              '<p><a href="#" class="link popover-close">Close</a></p>'+
	            '</div>'+
	          '</div>'+
	        '</div>',
	    on: {
		    open: function () {
			    console.log('Popover opened');
			}
		}
	}).open();
})
1 Like

Thanks! That works great. Creating on click was the issue.