I am using Javascript to handle a Bootstrap popover, but the Javascript inside the LinkButton (which is inside a repeater) doesn't fire. I think it has something to do with the way I setup the Javascript for the popover. I would appreciate some help!
Markup
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" id="ProjectCardButton" type="button" data-toggle="popover">
Project Dropdown (WIP)
</button>
<div class="ProfilePopupModal col-md-4 clearfix d-md-block" id="ProjectCard">
<div class="card mb-2">
<div class="card-body" style="width: 200px; padding-left: 0 !important;">
<div class="row">
<div class="col-lg">
<asp:Repeater ID="projectDropdown" runat="server">
<ItemTemplate>
<asp:LinkButton runat="server" Text="Link button" OnClientClick="selectProject() {alert('You pressed Me!');}; return false;" />
</br>
</ItemTemplate>
</asp:Repeater>
</div>
</div>
</div>
</div>
</div>
</div>
Javascript
var options = {
html: true,
placement: 'bottom',
content: function () {
return $('#ProjectCard').html();
}
}
$("#ProjectCardButton").popover(options);
CSS
.ProfilePopupModal {
visibility: hidden;
position: fixed;
overflow-x: hidden;
}
I was able to figure it out thanks to shrewmouse on stackoverflow. His answer can be found here: link
I had to change the popover content in my javascript so that it includes the dynamically binded data. I did this by removing .html().
Previously I was only returning the html of my popover content which was why the links weren't working. The other code above and below the popover (as shown below) are meant to handle the hiding and showing of the popover content itself that lives in the DOM.
$("#ProjectCard").hide();
$('#ProjectCardButton').popover({
html: true,
placement: 'bottom',
container: '.bootstrap-iso',
content: $('#ProjectCard')
});
$('#ProjectCardButton').popover('show');
$('#ProjectCardButton').popover('hide');
$("#ProjectCard").show();