3

I have a button that opens a bootstrap popover. This is the markup. 

 <HeaderStyle Width="6%"></HeaderStyle>
      <ItemTemplate>
        <asp:LinkButton runat="server" ID="button1" data-toggle="popover" CssClass="btn btn-primary" Text="Button1" />
      </ItemTemplate>

Javascript:

  $('[data-toggle="popover"]').popover({
    placement: 'left',
    trigger: 'click',
    html: true,
    content: $('#testDiv')
  });

The aim is to display the bootstrap popover from the code behind/ server side code. This is what I tried from the code behind which did not work.

C#

ScriptManager.RegisterStartupScript(this, GetType(), "popoverscript", "$('#testDiv').popover('show'); ", true);

Any suggestion is much appreciated.

Susan JOshi
  • 43
  • 8

2 Answers2

2

Sounds like code to show popover not executed because jQuery library may not already loaded or not in ready state when attempting to call popover('show') function in RegisterStartupScript method. Try wrapping that function call inside document.ready block:

string script = "$(function() { $('#testDiv').popover('show'); });"

ScriptManager.RegisterStartupScript(this, GetType(), "popoverscript", script, true);

Note: Also make sure that $('[data-toggle="popover"]').popover(...) definition already wrapped inside document.ready block if popover still not showing up.

Similar issues:

Show popover from code behind

bootstrap popover from code behind

Tetsuya Yamamoto
  • 24,297
  • 8
  • 39
  • 61
  • Thank you for your suggestion. Yes, I completely agree with your view on it. We got the issue resolved. The content inside the jquery (popover) wasn't in the ready state/ wasn't initialized like you mentioned. My colleague [link](https://stackoverflow.com/users/7898069/jbizzle)@JBizzle came up with the solution. I will post the solution on the next comment. – Susan JOshi Jul 24 '18 at 14:00
  • `ScriptManager.RegisterStartupScript(this, GetType(), "popoverscript", "$('#" + button.ClientID + "').popover({ html: true, content: $('#actionButtonDiv'), container: 'body', trigger: 'focus', placement: 'left'});", true); ScriptManager.RegisterStartupScript(this, GetType(), "show", "$('#" + button.ClientID + "').popover('show');", true);` – Susan JOshi Jul 24 '18 at 14:04
1

To clarify the solution we found just a bit:

It was a timing issue. We were trying to initialize the popovers in JavaScript. We had put this:

$('[data-toggle="popover"]').popover({
    placement: 'left',
    trigger: 'click',
    html: true,
    content: $('#testDiv')
  });

inside of a call to Sys.Application.add_load(). The problem was that when we went to show the popover from the server, the popovers weren't initialized yet, because anything on the client will execute after the server is done. The solution was to move both the initialization and the call to show inside of the server side button click event handler to make sure they were initialized and then shown in the proper order.

In the button event, C#:

ScriptManager.RegisterStartupScript(this, GetType(), "popoverscript", "$('#" + 
button.ClientID + "').popover({ html: true, content: $('#actionButtonDiv'), 
container: 'body', trigger: 'focus', placement: 'left'});", true); 

ScriptManager.RegisterStartupScript(this, GetType(), "show", "$('#" + button.ClientID 
+ "').popover('show');", true);
JBLearnsCode
  • 53
  • 7