Click here to Skip to main content
14,925,167 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
Hi everyone,

Environment:
ASP.NET {WebfForms}
VS: 2013

I come to you for aid regarding Bootstrap Popover; we implemented this functionality in one of our pages [Master -> Content Page -> UserControl] in the following manner:
In the Content Page:
<script type="text/javascript">

    function pageLoad() {
        if (Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack()) {
            $(document).ready(function () {
                $('.popper').popover({
                    container: 'body',
                    placement: 'auto',
                    html: true,
                    title: 'Observaciones',
                    content: function () {
                        return $(this).children(':first').html();
                    }
                });
            });
        };
    }

</script>


The popper class was assigned as follows (in the UserControl):
<asp:TemplateField HeaderText="Observaciones">
    <ItemTemplate>
        <div style="width: 275px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align:left" class="popper" data-toggle="popover" data-trigger="hover" >
            <asp:Label ID="lbObs" runat="server" Text='<%# Eval("Observacion") %>'></asp:Label>
        </div>
    </ItemTemplate>
</asp:TemplateField>


This scenario works just fine; every row withing our GridView behaves as expected. However, on another page {Master -> ChildMaster -> Content Page -> UserControl} it simply does not work at all.

There are only two mayor differences:
a) The Child Master Page, which only handles look & feel for a certain group of pages
b) A second instance of the UserControl in such content page; which obviously has its very own name, etc.

The script was implemented at Content Page level, just like before; and the class in the secondary user control like this:
<asp:TemplateField HeaderText="Observaciones">
    <ItemTemplate>
        <div style="width: 275px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align:left" class="popper" data-toggle="popover" data-trigger="hover" >
            <asp:Label ID="lbObsAlt" runat="server" Text='<%# Eval("Observacion") %>'></asp:Label>
        </div>
    </ItemTemplate>
</asp:TemplateField>


All script references are located in the Master Page:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


What I have tried:

Looking at Firefox's developer tools, I identified a "minor" difference in the way these controls are rendered, but ignore why or if it has something to do with the issue:

Working Page:
<div style="width: 275px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align:left" class="popper" data-toggle="popover" data-trigger="hover" data-original-title="" title=""></div>


NON-working Page:
<div style="width: 275px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align:left" class="popper" data-toggle="popover" data-trigger="hover">
</div>


This is my first time using this plugin, and really do not know what's going on.

Guidance is much appreciated. Thanks in advance.
Posted
Updated 8-Nov-17 14:13pm
v2
Comments
Karthik_Mahalingam 6-Nov-17 10:29am
   
does the page contains update panel ?
alexvw 6-Nov-17 11:01am
   
Hello Karthik; both Content Pages contain Update Panels, and both user controls reside inside of them.
Karthik_Mahalingam 7-Nov-17 7:16am
   
try
function pageLoad() {
            
 
    $('.popper').popover({
        container: 'body',
        placement: 'auto',
        html: true,
        title: 'Observaciones',
        content: function () {
            return $(this).children(':first').html();
        }
    });
 
        }
alexvw 8-Nov-17 15:55pm
   
Hello Karthik, good day.

I have tried your suggestion, i.e. removing the call to

Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack()

and for the initial tests, it seems to work. By this I mean, it allows the popup to work as expected in the two other pages where it had stopped working. Can you elaborate on the reason why this behavior?

Also, how can I mark your reply as answer and rate it? ;) Thanks a lot!
Karthik_Mahalingam 8-Nov-17 20:16pm
   
ok, have posted it as solution
function pageLoad() { , this function is equivalant to dom ready event for update panel enabled pages. so no need to call these lines once again
if (Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack()) {
$(document).ready(function () {

however you shal apply both the codes to work in all cases
meaning pageload() for update panel enabled pages
$(document).ready(function () { for non updated panel pages.


1 solution

posting as solution since it got resolved in comments section and to avoid unanswered post
function pageLoad() {
            
 
    $('.popper').popover({
        container: 'body',
        placement: 'auto',
        html: true,
        title: 'Observaciones',
        content: function () {
            return $(this).children(':first').html();
        }
    });
 
        }
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900