Question

I am running into an issue with running javascript from an external javascript file inside of an UpdatePanel. I am trying to get a color picker working inside of a ListView. The ListView is inside of an UpdatePanel.

I am using this color picker.

Here is what I have narrowed it down to:

• If I use the color picker on a textbox outside of an UpdatePanel, it works perfectly fine through all postbacks.

• If I use the color picker on a textbox inside of an UpdatePanel, it works, until I do an async postback(clicking on an “EDIT” button in the ListView). Once the UpdatePanel has done the postback, the textbox will no longer show the color picker when clicked. The same occurs when the textbox is in either the InsertItemTemplate or EditItemTemplate of the ListView.

If you would like to replicate it, simply download the color picker(it’s free), then add this to a webpage…

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

<div>
    <asp:UpdatePanel ID="panel1" runat="server">
        <ContentTemplate>
            <asp:TextBox runat="server" ID="textbox" CssClass="color" />
            <asp:Button ID="Button1" runat="server" Text="Button" />
        </ContentTemplate>
    </asp:UpdatePanel>
</div>

When the page loads, the color picker works fine. When you click on the button(which does a postback), the color picker will no longer work.

Any ideas?

Answer 1

After an asynchronous roundtrip, any startup scripts will not be run, which is likely why it doesn’t work after the AJAX callback. The color picker likely has functions which need to be executed on page load.

I’ve run into this so many times that I wrote a small method to register my scripts in the code-behind, which handles both async and non-async round trips. Here’s the basic outline:

private void RegisterClientStartupScript(string scriptKey, string scriptText)
{
    ScriptManager sManager = ScriptManager.GetCurrent(this.Page);

    if (sManager != null && sManager.IsInAsyncPostBack)
    {
        //if a MS AJAX request, use the Scriptmanager class
        ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), scriptKey, scriptText, true);
    }
    else
    {
        //if a standard postback, use the standard ClientScript method
        scriptText = string.Concat("Sys.Application.add_load(function(){", scriptText, "});");
        this.Page.ClientScript.RegisterStartupScript(this.Page.GetType(), scriptKey, scriptText, true);
    }
}

I actually baked the above into a base page class so that any page I’m working with can call this.RegisterClientStartupScript(...). To do that, simply create a base page class and include it there (making sure to mark protected not private or your inheriting page classes won’t be able access it).

With the above code, I can confidently register client scripts regardless of whether the page is doing a postback or callback. Realizing you are using external script files, you could probably modify the above method to register external scripts rather than inline. Consult the ScriptManager class for more details, as there are several script registering methods…