I tried submitting this over on the bootstrap forum but haven't gotten any responses. I am green as far as javascript goes. I want to have a popover be displayed on click or mouseover of cells of data within a gridview. The gridview I am using is wrapped in an update panel which I think might be part of my issue.
Does anyone have an example of how to do this by chance?
My issue is that the first 10 records (paging is on and shows 10 at a time) of data i can get it to work it seems. However, when i go to any page after that it doesn't seem to work. I am wondering if has something to do with the updatepanel but I am not certain.
anyone done this or have an example by chance that I could follow to get this to work?
Thanks for the help.
Code:
<asp:Panel ID="pnlRefenceList" GroupingText='Reference ' runat="server">
<asp:GridView ID="gvwIllustration" runat="server" CssClass="table table-hover" AutoGenerateColumns="false" PagerStyle-CssClass="pgr" AllowPaging="True" OnPageIndexChanging="gvwIllustration_PageIndexChanging" OnRowDataBound="gvwIllustration_RowDataBound" DataKeyNames="REFERENCE_ID,PART_ID">
<Columns>
<asp:BoundField DataField="REFERENCE_ID" HeaderText="ID" SortExpression="REFERENCE_ID" Visible="false" />
<asp:TemplateField AccessibleHeaderText="Title" HeaderText="Reference Number" SortExpression="REFERENCE_ID">
<ItemTemplate>
<asp:HyperLink ID="hypName" runat="server" NavigateUrl="" Text='<%# Eval("REF_NUMBER") %>'></asp:HyperLink>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="REF_SEQ_NUMBER" HeaderText="Sequence #" SortExpression="REF_SEQ_NUMBER" Visible="TRUE" />
<asp:TemplateField AccessibleHeaderText="Title" HeaderText="Part Number" SortExpression="PART_ID">
<ItemTemplate>
<asp:HyperLink ID="hypName" runat="server" NavigateUrl="" Text='<%# Eval("PART_NUMBER") %>'></asp:HyperLink>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="REF_DESC" HeaderText="Description" SortExpression="REF_DESC" Visible="TRUE" />
<asp:BoundField DataField="LINK_COUNT" HeaderText="Link Count" SortExpression="LINK_COUNT" Visible="TRUE" />
<asp:BoundField DataField="REMARKS" HeaderText="Remarks" SortExpression="REMARKS" Visible="TRUE" />
<asp:BoundField DataField="DISPOSITION" HeaderText="Disposition" SortExpression="DISPOSITION" Visible="TRUE" />
<asp:BoundField DataField="QTY" HeaderText="Quantity" SortExpression="QTY" Visible="TRUE" />
<%--<asp:BoundField DataField="HAS_SERIALS" HeaderText="Has Serials" SortExpression="HAS_SERIALS" Visible="TRUE" />--%>
<asp:TemplateField AccessibleHeaderText="Title" HeaderText="Has Serials" SortExpression="HAS_SERIALS">
<ItemTemplate>
<a href="#" class="IllustrationGridLink" rel="popover" data-original-title='This is title ao' data-content='junk - data content'><%# Eval("HAS_SERIALS") %></a>
<div id="popover_content_wrapper" style="display: none">This is your div content</div>
</div>
<%--<%# Eval("YourDataContent")%>--%>
<%--<asp:HyperLink ID="hypHasSerials" runat="server" NavigateUrl="" Text='<%# Eval("HAS_SERIALS") %>' data-original-title='This is your title ' data-content='junk - data content'>></asp:HyperLink>--%>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="ACTIVE_DATE" dataformatstring="{0:MM/dd/yyyy}" HeaderText="Active Date" SortExpression="ACTIVE_DATE" Visible="TRUE" />
<asp:BoundField DataField="INACTIVE_DATE" dataformatstring="{0:MM/dd/yyyy}" HeaderText="Inactive Date" SortExpression="INACTIVE_DATE" Visible="TRUE" />
</Columns>
</asp:GridView>
</asp:Panel>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('[rel=popover]').popover({
html: true,
content: function () {
return $('#popover_content_wrapper').html();
}
});
});
</script>
</ContentTemplate>
<Triggers>
</Triggers>
</asp:UpdatePanel>
You can supply an event delegation target selector pointing to an element which might or might not exist using the selector option.
$('body').popover({
html: true,
content: function () {
return $(this).next().text();
},
selector: '.has-popover'
});
EDIT:
See this jsFiddle Demo and maybe this will make more sense. Notice how when a new row is added, it still gets a popup because I have added the selector: '.has-popover' option set. This will add a popover to any element with the .has-popover class, whenever the element is created.
You can add custom content by dynamically loading the content option as shown above and in my demo. Basically, what this is doing is taking the current element that the popover is being created for $(this) then traversing to the "next" element .next() then grabbing its text .text().
ANOTHER EDIT:
I just found This jsFiddle Demo which describes this better than I can....
The 'selector' option essentially allows you to run tooltips and popovers using jQuery's 'on' function, which means that you can allow dynamically added HTML with the correct selectors to trigger popups as if they were present in the originally loaded DOM. Without the selector option, only elements present in the initial DOM will trigger tooltips; any that are dynamically added will not.