Unable to call JavaScript Function From CodeBehind

Question

I have gridView were if the user clicks on a button I want to give its informations to popup.

Here is the javascript to open and close the popup

<script type="text/javascript">
    function ShowModalPopup() {
        $find("mpe").show();
        return false;
    }
    function HideModalPopup() {
        $find("mpe").hide();
        return false;
    }

Here is were my button is

<asp:TemplateField>
                        <ItemTemplate>
                            <asp:ImageButton ImageUrl="~/Images/shopping.png" runat="server"  ToolTip="Shopping" Width="20px" Height="20px" OnClick="makePurchaseOrder"   />                         
                        </ItemTemplate>
                    </asp:TemplateField>

here is what happens when I call the button

    protected void makePurchaseOrder(object sender, EventArgs e)
    {
        ImageButton btn = (ImageButton)sender;
        GridViewRow gvr = (GridViewRow)btn.NamingContainer;
        int rowindex = gvr.RowIndex;
        var idrow = (Control)sender;
        GridViewRow row = (GridViewRow)idrow.NamingContainer;

        componenteID = Convert.ToInt32(gvInventario.DataKeys[row.RowIndex].Values[0]);
        proveedor_id = Convert.ToInt32(gvInventario.DataKeys[row.RowIndex].Values[2]);
        Page.ClientScript.RegisterStartupScript(this.GetType(), "OpenPopupClick", "ShowModalPopup();", false);
    }

This is what my modual popup looks like

<asp:LinkButton ID="lnkDummy" runat="server"></asp:LinkButton>
<cc1:ModalPopupExtender ID="ModalPopupExtender1" BehaviorID="mpe" runat="server"
    PopupControlID="pnlPopup" TargetControlID="lnkDummy" BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
<asp:Panel ID="pnlPopup" runat="server" style="display: none">
         <div >
  <div class="modal-content">
      <asp:Button ID="btnHide" runat="server" OnClientClick="return HideModalPopup()" />
                <a class="close" href="#" >&times;</a>
                <h2>Here i am</h2>
                <div class="content">
                <asp:Label ID="Label17" runat="server" Text="Comprar" CssClass="second-menu-title"></asp:Label>  
                        <br/>
                            <b><asp:Label ID="Label18" runat="server" Text="Proveedor:  "></asp:Label></b>
                            <asp:Label ID="Label19" runat="server" Text=""></asp:Label>
                        <br/>
                            <b><asp:Label ID="Label20" runat="server" Text="Tipo: "></asp:Label></b>
                            <asp:Label ID="Label21" runat="server" Text=""></asp:Label>
                            <asp:Label ID="Label22" runat="server" Text=""></asp:Label>
                        <br/>
                            <b><asp:Label ID="Label23" runat="server" Text="Cantidad pedida:  "></asp:Label></b>
                            <asp:TextBox width="50px" ID="TextBox2" runat="server" TextMode="Number" min="0" step="1" Value="0"></asp:TextBox> 
                            <br/>  
                </div>
            </div>
        </div>
</asp:Panel>

The probelm is the modual popup does not appear on the button click. I am unsure why. Any help would be verry appreciated.

Why is the fourth argument (add script tags) set to false on Page.ClientScript.RegisterStartupScript? — JohnPete22
– JohnPete22, Commented Aug 7, 2019 at 17:58
I'd recommend debugging to find out two things: are you actually hitting the makePurchaseOrder() code-behind function, and debug in the browser to see what $find("mpe") is returning because that honestly seems a little off. — JohnPete22
– JohnPete22, Commented Aug 7, 2019 at 18:15

JohnPete22 · Accepted Answer · 2019-08-07 18:40:25Z

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

    <script type="text/javascript">
        function ShowModalPopup() {
            $('#<%= pnlPopup.ClientID %>').toggle();
        }

        function HideModalPopup() {
            $('#<%= pnlPopup.ClientID %>').toggle();
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>

            <asp:GridView ID="gvTest" runat="server" AutoGenerateColumns="false">
                <Columns>
                    <asp:TemplateField>
                        <ItemTemplate>
                            <asp:ImageButton ImageUrl="~/Images/system/RightArrow.png" runat="server" OnClick="Unnamed_Click" />
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>

            <asp:Panel ID="pnlPopup" runat="server" style="display:none;">
                <asp:ImageButton ID="btnTest" ImageUrl="~/Images/system/RightArrow.png" runat="server" OnClientClick="HideModalPopup(); return false;" />
                <p>Content Goes here</p>
            </asp:Panel>

        </div>
    </form>
</body>
</html>

public partial class _testPWforSO :  System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            int rowcount = 0;
            Collection<Product> products = InternalProduct.FindAll(0, 10, ref rowcount);
            gvTest.DataSource = products;
            gvTest.DataBind();
        }
    }

    protected void Unnamed_Click(object sender, ImageClickEventArgs e)
    {
        // code to find out which one was clicked
        this.Page.ClientScript.RegisterStartupScript(this.GetType(), "OpenPopupClick", "ShowModalPopup()", true);
    }
}

Collectives™ on Stack Overflow

Unable to call JavaScript Function From CodeBehind

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related