How can I display a Bootstrap popover with an html content from a GridView?

Question

I have been at this for like two hours now trying various stuff. I can get the popover to display as just a basic title/content, but I haven't found a way to get it to work with HTML and Eval() as the content yet. This is what I'm working with:

JS:

$(function () {
    $("#btnViewRefDrDetails").popover({
        html: true,
        content: function () {
            return $("#popover-content-wrapper").html();
        },
        title: function () {
            return $("#popover-title").html();
        },
        container: 'body'
    });
})

And the HTML:


                    
                        
                            
                            
                            <%--this should be the template for the popover--%>
                            
                                
                                    
                                        Provider Name: 
                                        <%# Eval("ReferringName")%>
                                    
                                    
                                        Provider Specialty: 
                                        <%# Eval("ProviderSpecialty")%> 
                                    
                                    
                                        Practice Name: 
                                        <%# Eval("PracticeName")%>
                                    
                                    
                                        Practice Address: 
                                        <%# Eval("PracticeAddress")%>
                                    
                                    
                                        Practice City: 
                                        <%# Eval("PracticeCity")%> 
                                    
                                    
                                        Practice State: 
                                        <%# Eval("PracticeState")%> 
                                    
                                    
                                        Practice ZIP: 
                                        <%# Eval("PracticeZip")%> 
                                    
                                    
                                        Practice Phone: 
                                        <%# Eval("PracticePhone")%> 
                                    
                                
                            
                            
                                <%# Eval("ReferringName")%>

When I click the LinkButton, nothing happens at all. No errors, just nothing. When I just hard code the popover's title and content it works fine. What do?

Enrique Zavaleta · Accepted Answer

I'm not sure if the problem is that there are more than one $("#popover-content-wrapper"), because if it is in a GridView, I think is normal to have more than one row.

I have an example of how I implment this to show a larger in a popover


    
            
    


$('img[data-toggle=popover]').popover({
    html: true,
    trigger: 'hover',
    content: function () {
        return '';
    }
});

As you can see, I save the information I want to pass to the popover in a data-X attribute in the trigger element, and in the JS function just place it when appropiate. In your case should be


    
            
    


$('a[data-toggle=popover]').popover({
    html: true,
    trigger: 'hover',
    content: function () {
        return ' etc...';
    }
});
Provider Name' + $(this).data('ReferringName') + '

How can I display a Bootstrap popover with an html content from a GridView?

Answers (1)

Related Questions