How to control which JavaScript gets run after UpdatePanel partial postback endRequest?

Question

I know I can hook into the client side events to run JavaScript after every partial postback; however, I want to do something like this:

protected void FooClicked(object sender, EventArgs e) {
        ClientScript.RegisterStartupScript(GetType(), "msg", "showMsg('Foo clicked');",true);        
}

I know I could totally hack it with hidden fields and run something after every postback, but there should be a pretty straightfoward way to in a similar fashion to this.

Answer 1

The specific code sample you are describing does not work with partial post-backs, since ClientScript.RegisterStartupScript() writes JS to the page during the output construction phase of the request lifecycle; whereas a partial postback only updates a selected portion of the page via JavaScript (even though the markup for the entire page, including your startup script, is generated on the server).

To closely mimic what you are describing, you ought to include a Literal control inside your UpdatePanel, and during partial postback set the Text property of the content panel to the script you wish to run:

myLiteral.Text = "<script type=\"JavaScript\">doStuff();</script>";

IMO, a more proper way is to use the client-side API for async postbacks to register an event handler to run when the postback completes:

function endRequestHandler(sender, args) {
    doStuff();
}

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);

If you need to pass information which was generated during the postback into the handler, you can pass that via hidden fields and grab that from the DOM in your client-side handler.

Answer 2

<script type="text/javascript" language="javascript">
    function ValidateUserRole() {  
        var answer = confirm("Are you sure..................")
        if (answer) {
            var btnRoleReleatedButton = '<%=btnRoleReleatedButton.ClientID%>';
            document.getElementById(btnRoleReleatedButton).click();
        }
        else {
            return false;
        }
    }
</script>

Tier 3 :<asp:UpdatePanel ID="upTier3Details" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:DropDownList ID="ddlTier3" runat="server" CssClass="ddlextralarge" Width="350" />
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="ddlUserRole" EventName="SelectedIndexChanged" />
    </Triggers>
</asp:UpdatePanel>

Answer 3

This is much more elegant, IMO. apparently ASP AJAX will call any JS function named pageLoad. so write a function called pageLoad and it will be executed on every page load, even after partial update.