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!