SharePoint TextField ClientID changes?

Question

I'm trying to use some javascript on a page layout, and I'm encountering a strange issue where the ClientID of a Sharepoint.WebControls.TextField seems to change between OnLoad and the page being displayed.

In the OnLoad event, TextField3.ClientID resolves to "ctl00_PlaceHolderMain_TextField3", but if look to see why my js doesn't work, the page source reveals that the control id to be "ctl00_PlaceHolderMain_TextField3_ctl00_TextField".

Any ideas what's going on?

Here's the code I'm using:

public class PostingTemplate : Microsoft.SharePoint.Publishing.PublishingLayoutPage
{
    protected DropDownList author;
    protected TextField TextField3;
    private List<string> _authorNames;

    public List<string> AuthorName
    {
        get { return _authorNames; }
        set { _authorNames = value; }
    }

    protected override void OnLoad(EventArgs e)
    {
        base.OnLoad(e);
        author.AutoPostBack = false;
        this.Page.ClientScript.RegisterClientScriptBlock(this.GetType(),
        "fillInAuthorText", getQuery(), true);
        author.Attributes.Add("onChange", "fillInAuthorText()");
        if (!Page.IsPostBack)
        {
            _authorNames = new List<string>();
            _authorNames = Utilities.GetAuthorList(SPContext.Current.Site);
            author.DataSource = _authorNames;
            author.DataBind();
        }
    }

    protected override void OnPreRender(EventArgs e)
    {
        base.OnPreRender(e);
        if (author.Items.Count > 0)
        {
            author.SelectedIndex = 0;
            TextField3.Text = ((ListItem)author.Items[author.SelectedIndex]).Text;
        }
    }

    private string getQuery()
    {
        string query = @" function fillInAuthorText() {
        var IndexValue = document.getElementById('";
        query += author.ClientID;
        query += @"').selectedIndex;
        var SelectedVal = document.getElementById('";
        query += author.ClientID;
        query += @"').options[IndexValue].value;
        document.getElementById('";
        query += TextField3.ClientID;
        query += @"').value = SelectedVal;
        }";
        return query;
    }
}

Answer 1

You need to include the client ID of the parent control as well.

// Replace:
query += author.ClientID;
// With:
query += base.ClientID + "_" + author.ClientID;

(Note that I've only ever done this with a web part so there may be some tweaking you need to do for it to work in a page layout.)

Another option is to resolve this client side. See Eric Shupp's blog for most info.

Answer 2

With help form Alex Angas, Here is what I discovered: The TexField renders out some literals that end up surrounding a textbox, and it's really the textbox that you're interested in. Here's the modified section of code:

 private string getQuery()
    {
        string query = @" function fillInAuthorText() {
        var IndexValue = document.getElementById('";
        query += author.ClientID;
        query += @"').selectedIndex;
        var SelectedVal = document.getElementById('";
        query += author.ClientID;
        query += @"').options[IndexValue].value;
        document.getElementById('";
        query += getTextFieldID(TextField3);
        query += @"').value = SelectedVal;
        }";
        return query;
    }

    private string getTextFieldID(Control txt)
    {
        foreach (Control c in txt.Controls)
        {
            if (c.HasControls())
            {
                foreach (Control con in c.Controls)
                    if (con is TextBox)
                        return con.ClientID;
            }
        }

        return "";
    }

Keep in mind, this is specific to my application, your mileage my vary.