AutoPostBack on ASP TextBox in UpdatePanel not working

Question

I have a TextBox control with a ColorPickerExtender on a form that sets a background color. I'd like two things to happen when the user changes the color:

• The color of the control changes
• I get an immmediate AJAX event so I can make changes in other parts of the page

The color change is working fine with the onColorChanged() JavaScript. My event handler also triggers both during a full postback and a partial/AJAX postback generated from other controls. However, it does not generate an immediate postback itself.

Here are the relevant lines of the .aspx file:

<%@ Page Title="" Language="C#" MasterPageFile="~/FingerTipDisplay.Master" AutoEventWireup="true" CodeBehind="EditorLayoutv3.aspx.cs" Inherits="FingerTipDisplay.config.EditorLayoutv3" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxControlToolkit" %>



<asp:UpdatePanel ID="upGeneralLayoutData" runat="server">
    <ContentTemplate>
        <asp:Label runat="server" Text="Background color:" CssClass="ContentBodyText" ToolTip="Select the background color for this layout"></asp:Label>
        <asp:TextBox ID="txtLayoutBackgroundColor" runat="server" ToolTip="Select the background color for this layout" CssClass="ColorPickerExtenderTextBox" Width="50" OnTextChanged="txtLayoutBackgroundColor_TextChanged" AutoPostBack="True"></asp:TextBox>
        <ajaxControlToolkit:ColorPickerExtender TargetControlID="txtLayoutBackgroundColor" runat="server"  OnClientColorSelectionChanged="onColorChanged" />
    </ContentTemplate>
</asp:UpdatePanel>

Here is the ScriptManager from the site master:

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

Here is the event handler:

protected void txtLayoutBackgroundColor_TextChanged(object sender, EventArgs e)
{
    moLayout.BackgroundColor = txtLayoutBackgroundColor.Text;

    if (moLayout.BackgroundColor.Substring(0, 1) != "#")
    {
        moLayout.BackgroundColor = "#" + moLayout.BackgroundColor;
    }

    // TODO: update preview image
}

Here is the JavaScript:

onColorChanged = function (oSender) {
    /// <summary>Callback to use for when a color picker extender changes colors.  This
    /// sets the foreground and background of the TextBox control to the selected color.
    /// <param name='oSender' type='Object'>The control that changed</param>
    oSender.get_element().style.color = "#" + oSender.get_selectedColor();
    oSender.get_element().style.backgroundColor = "#" + oSender.get_selectedColor();
}

Answer 1

Solved the problem. It turns out that when the ColorPickerExtender changes the text in the corresponding TextBox it does not raise the TextChanged event at all. Manually typing in the TextBox generated the desired effect, however, so I just added this to the onColorChanged handler:

oSender.get_element().onchange();

Now it works. Thanks to all for your help.