Unable to trigger JavaScript method from code-behind using Update Panel

Question

Issue details:

After saving the data in DB, I need to show an alert to the user. For this, I have registered the script from code-behind. But it is NOT working with update-panel whereas it works as expected without update-panel. I need to make it work with update-panel.

I tried by adding $(document).ready(function () while registering the script, but it didn't work.

Then, I tried with ScriptManager.RegisterClientScriptBlock() method instead of Page.ClientScript.RegisterStartupScript(), but it also didn't work.

Here is the code snippet of web page (ASPX):

<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <asp:Button ID="btnOutsideUpdatePanel" runat="server" Text="Outside UpdatePanel" OnClick="btnOutsideUpdatePanel_Click" />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Button ID="btnInsideUpdatePanel" runat="server" Text="Inside UpdatePanel" OnClick="btnInsideUpdatePanel_Click" />
            </ContentTemplate>
        </asp:UpdatePanel>
        <uc1:Child runat="server" id="Child1" />
         <asp:UpdatePanel ID="UpdatePanel2" runat="server">
            <ContentTemplate>
                <uc1:Child runat="server" id="Child2" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>

Here is the code snippet of user-control (ASCX):

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Child.ascx.cs" Inherits="UpdatePanelAndScript.Child" %>
<asp:Button ID="btnUserControl" runat="server" Text="User Control" OnClick="btnUserControl_Click" />

Code-behind of web-page:

protected void btnOutsideUpdatePanel_Click(object sender, EventArgs e)
{
    Page.ClientScript.RegisterStartupScript(this.GetType(), "ShowSuccess", "alert('Hi');", true);
}

protected void btnInsideUpdatePanel_Click(object sender, EventArgs e)
{
    Page.ClientScript.RegisterStartupScript(this.GetType(), "ShowSuccess", "alert('Hi');", true);
}

Code-behind of user-control:

protected void btnUserControl_Click(object sender, EventArgs e)
{
    Page.ClientScript.RegisterStartupScript(this.GetType(), "ShowSuccess", "alert('Hi');", true);
}

krlzlx · Accepted Answer · 2017-10-17 12:21:33Z

1

You only need to change the following statement:

Page.ClientScript.RegisterStartupScript
(
    this.GetType(),
    "ShowSuccess",
    "alert('Hi');",
    true
);

To:

ScriptManager.RegisterStartupScript
(
    this,
    this.GetType(),
    "ShowSuccess",
    "alert('Hi');",
    true
);

Reference:

MSDN ScriptManager Class

Registering Partial-Page Update Compatible Scripts
[...] If you are rendering script for use inside an UpdatePanel control, make sure that you call the methods of the ScriptManager control.

edited Oct 17, 2017 at 12:21

answered Oct 17, 2017 at 12:03

krlzlx

5,83114 gold badges51 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pranav Kumar Over a year ago

Yes, it worked in the above code snippet. Thanks But, after integrating it in the actual code-base it is NOT working as expected (It is working partially).. Issue Description: I have an AJAX file-uploader control inside update panel. Case 1: When I add the update-panel property "updateMode='conditional'", the popup works as expected. But the control that is kept outside of update-panel doesn't get render after partial-postback. Case 2: And I remove the update-panel property "updateMode='conditional'", the popup DOESN'T work at all i.e. the script doesn't get register in the DOM.

krlzlx Over a year ago

"But the control that is kept outside of update-panel doesn't get render after partial-postback". Is your control generated dynamically? Can you provide the required code to reproduce your issue?

Collectives™ on Stack Overflow

Unable to trigger JavaScript method from code-behind using Update Panel

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related