show popover from code behind

Question

User-1605638221 posted

Hi,

In my gridview header, i have user names and what I need is, to display user details, in bootstrap popover when user click on the user name.

I tried below just to check if can get the popover to display from code behind but it did not work:

ASPX:                        

<a href="#" id="popover">the popover link</a>
<div id="popover-head" class="hide">
    some title
    <button type="button" class="close" data-dismiss="popover" aria-hidden="true">×</button>
</div>
<div id="popover-content" class="hide">
    <input type="text" id="txtInput" />
    <button type="button" id="btn" class="clickme" value="Calc" ></button>    
</div>

Code behind:

Protected Sub I1_Click(sender As Object, e As System.EventArgs) Handles I1.Click
        Dim sb As New System.Text.StringBuilder
        sb.Append("<script type='text/javascript'>")
        sb.Append("$('#popover').popover({")
        sb.Append("html: true,")
        sb.Append("title: function () {")
        sb.Append("return $(""#popover-head"").html();")
        sb.Append("},")
        sb.Append("content: function () {")
        sb.Append("return $(""#popover-content"").html();")
        sb.Append("}});")
        sb.Append("</script>")
        ScriptManager.RegisterClientScriptBlock(Me, Me.GetType(),
            "popoverscript", sb.ToString(), False)
    End Sub

How can I call a popover from the code behind or any alternatives? Help please...

Thanks, Navin

Answer 1

User-760709272 posted

You can't call javasscript from code-behind.  If all you want to do is show the popup then you'll need to use javascript.  Embed the javascript as normal in the page and attach a click event to the button and run your javascript on that event.

Answer 2

User-474980206 posted

ScriptManager.RegisterClientScriptBlock render the script right after the form tag. wrap the the code in $.ready or use ScriptManager.RegisterStartupScript which render before the </form> tag. or move the popup div before the <form>.

Answer 3

User281315223 posted

Are you receiving any errors within the Console section using the Developer Tools (F12) within your browser?

It's likely that your jQuery code is not executing because the jQuery library itself may not be ready when you attempt to call that function. You'll likely want to wrap it within a "document-ready" block as seen below and call the RegisterStartupScript method : 

'Build your script'
Dim script = "$(function(){ $('#popover').popover({ html: true, title: function () { return $('#popover-head').html(); }, content: function () { return $('#popover-content').html();}});});"

'Wire up your actual script'
ClientScript.RegisterStartupScript(Me, Me.GetType(),"popoverscript", script, True)

Answer 4

User1080785583 posted

use fiddler to help you define "did not work". then decide if you need a framework for a UI to help you figure out how to program some feature like popup grid, or load on demand. essentially all you need is to bind an event to your TR. 

$('body').on('click', '#tableId tr', function(){

// do work

});

http://forums.asp.net/t/1819249.aspx