Every ID is undefined

[jimatqsi]

Question from a javascript newbie ...
I'm having trouble getting this simple thing to work

ClickNumberID= document.getElementById('<%= TrackClicks.ClientID %>');

I am using document.getElementById in another instance on the same page without problem. But in this case it always comes back with null for the id.

So I found this function to list every tagName on the document. I modified it to list every ID on the document and I call this function where I'm trying to get the element ID. And it shows every ID is undefined. You can see a few lines of that response at the end of this post.

function findhead1()
{
    var tag, tags;
    tags = "The ClientIDs in the page are:"
    for(i = 0; i < document.all.length; i++)
    {
  //      tag = document.all(i).tagName;
        tag= document.all(i).id+document.all(i).ClientID
        tags = tags + "\n" + tag;
    }
    document.write(tags);
}
 

What's causing this?

Thanks,
Jim

Here's some of the document.write output
l00_The ClientIDs in the page are: undefined undefined ctl00_Head1undefined undefined undefined undefined undefined undefined undefined undefined ctl00_Body1undefined aspnetFormundefined undefined __EVENTTARGETundefined __EVENTARGUMENTundefined ctl00_PageContent_ProjectsTabContainer_ClientState undefined __LASTFOCUSundefined __VIEWSTATEundefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined ctpageLeftCoordinateundefined ctl00_pageTopCoordinateundefined ctl00_PageSettingsundefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined ctl00__PageHeader__Logoundefined undefined ctl00__PageHeader__LoginoutButtonundefined ctl00__PageHeader_UserNameLabelundefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined ctl00__MenuV_MultiLevelMenuundefined undefined undefined ctl00__MenuV_MultiLevelMenun0undefined undefined undefined undefined undefined undefined undefined ctl00__MenuV_MultiLevelMenun0Itemsundefined undefined undefined ctl00__MenuV_MultiLevelMenun1undefined undefined undefined undefined undefined undefined undefined undefined ctl00__MenuV_MultiLevelMenun0ItemsUpundefined undefined ctl00__MenuV_MultiLevelMenun0ItemsDnundefined undefined ctl00__MenuV_MultiLevelMenu_SkipLinkundefined undefined undefined undefined undefined undefined undefined undefined StartOfPageContentundefined ctl00_PageContent_UpdatePanel1_UpdateProgress1unde fined undefined undefined undefined ctl00_PageContent_UpdatePanel1undefined ctl00_PageContent__clientSideIsPostBackundefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined ctl00_PageContent_ProjectsRecordControlPanelExtend er_ClientStateundefined ctl00_PageContent_ProjectsRecordControlIconundefin ed undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined ctl00_PageContent_ProjectsRecordControlCollapsible Regionundefined undefined undefined undefined undefined ctl00_PageContent_ProjectsRecordControlPanelundefi ned undefined undefined undefined undefined ctl00_PageContent_NewProjectundefined undefined undefined ctl00_PageContent_ProjectNameundefined ctl00_PageContent_ProjectNameTextBoxMaxLengthValid atorundefined undefined undefined undefined undefined undefined undefined ctl00_PageContent_HiddenProjectIDTextBoxMaxLengthV alidatorundefined undefined undefined ctl00_PageContent_PublicUseundefined undefined undefined ctl00_PageContent_WordWrapundefined undefined undefined ctl00_PageContent_Activeundefined undefined undefined ctl00_PageContent_Expiredundefined undefined undefined undefined undefined undefined ctl00_PageContent_ExpirationDateundefined undefined undefined ctl00_PageContent_ExpirationDateTextBoxMaxLengthVa lidatorundefined undefined undefined ctl00_PageContent_Deletedundefined undefined undefined undefined undefined undefined undefined undefined ctl00_PageContent_ProjectIDRequiredFieldValidatoru ndefined ctl00_PageContent_ProjectIDTextBoxMaxLengthValidat orundefined undefined undefined ctl00_PageContent_BeginTextPosundefined undefined undefined ctl00_PageContent_MessyTextFileundefined ctl00_PageContent_MessyTextFileTextBoxMaxLengthVal idatorundefined ctl00_PageContent_UIMessages_txtundefined undefined undefined ctl00_PageContent_ProjectNotesundefined ctl00_PageContent_ProjectNotesTextBoxMaxLengthVali datorundefined undefined undefined ctl00_PageContent_ClickableTextBoxundefined ctl00_PageContent_TextBoxWatermark_ClientStateunde fined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined ctl00_PageContent_MessyTextundefined ctl00_PageContent_MessyTextTextBoxMaxLengthValidat orundefined undefined undefined undefined undefined undefined undefined undefined ctl00_PageContent_ProjectsTabContainerundefined ctl00_PageContent_ProjectsTabContainer_headerundef ined ctl00_PageContent_ProjectsTabContainer_Columnlayou tTabPanel_tabundefined undefined undefined __tab_ctl00_PageContent_ProjectsTabContainer_Colum nlayoutTabPanelundefined ctl00_PageContent_ProjectsTabContainer_ValidationT abPanel_tabundefined undefined undefined __tab_ctl00_PageContent_ProjectsTabContainer_Valid ationTabPanelundefined ctl00_PageContent_ProjectsTabContainer_ClicksTabPa nel_tabundefined undefined undefined __tab_ctl00_PageContent_ProjectsTabContainer_Click sTabPanelundefined ctl00_PageContent_ProjectsTabContainer_ColumndataT abPanel_tabundefined undefined undefined __tab_ctl00_PageContent_ProjectsTabContainer_Colum ndataTabPanelundefined ctl00_PageContent_ProjectsTabContainer_bodyundefin ed ctl00_PageContent_ProjectsTabContainer_Columnlayou tTabPanelundefined undefined undefined undefined undefined ctl00_PageContent_ProjectsTabContainer_Columnlayou tTabPanel_ColumnlayoutTableControlCollapsibleRegio nundefined undefined undefined undefined undefined tableContainerundefined undefined undefined undefined undefined undefined undefined undefined ctl00_PageContent_ProjectsTabContainer_Columnlayou tTabPanel_ColumnlayoutToggleAllundefined undefined ctl00_PageContent_ProjectsTabContainer_Columnlayou tTabPanel_ColumnNumberLabelundefined undefined ctl00_PageContent_ProjectsTabContainer_Columnlayou tTabPanel_DelimiterBeginningLabelundefined ctl00_PageContent_ProjectsTabContainer_Columnlayou tTabPanel_DelimiterEndingLabelundefined undefined ctl00_PageContent_ProjectsTabContainer_Columnlayou tTabPanel_DelimiterBIncludedinPasteLabelundefined undefined ctl00_PageContent_ProjectsTabContainer_Columnlayou tTabPanel_DelimiterBIncludedinCutLabelundefined undefined ctl00_PageContent_ProjectsTabContainer_Columnlayou tTabPanel_FixedLengthLabelundefined ctl00_PageContent_ProjectsTabContainer_Columnlayou tTabPanel_MaximumSizeLabelundefined undefined ctl00_PageContent_ProjectsTabContainer_Columnlayou tTabPanel_TrimBlanksLabelundefined ctl00_PageContent_ProjectsTabContainer_Columnlayou tTabPanel_AutoClearLabelundefined undefined ctl00_PageContent_ProjectsTabContainer_Columnlayou tTabPanel_ValueCrossesCrLfLabelundefined ctl00_PageContent_ProjectsTabContainer_Columnlayou tTabPanel_ActiveLabel3undefined undefined ctl00_PageContent_ProjectsTabContainer_Columnlayou tTabPanel_NotesLabel1undefined undefined undefined undefined ctl00_PageContent_ProjectsTabContainer_Columnlayou tTabPanel_ColumnlayoutTableControlRepeater_ctl00_C olumnlayoutRowViewButtonundefined undefined undefined ctl00_PageContent_ProjectsTabContainer_Columnlayou tTabPanel_ColumnlayoutTableControlRepeater_ctl00_C olumnlayoutRecordRowSelectionundefined undefined undefined undefined undefined undefined ctl00_PageContent_ProjectsTabContainer_Columnlayou tTabPanel_ColumnlayoutTableControlRepeater_ctl00_C olumnNumber1undefined undefined undefined

[Dormilich]

I'm having trouble getting this simple thing to work

ClickNumberID= document.getElementById('<%= TrackClicks.ClientID %>');

- what does this code look like in the browser?
- when do you call this piece of code?
- does this ID exist in your HTML?

tag= document.all(i).id+document.all(i).ClientID

- there is no attribute ClientID (at least not in HTML)
- when do you call this function?

[jimatqsi]

I have a textbox defined as so:

<asp:textbox id="ClickableTextBox" runat="server" cssclass="field_input" onclick="MessyTextClick()" width="800px" textmode="MultiLine" tooltip="Unprocessed Messy Text" columns="6" rows="8"></asp:textbox> 
<asp:textboxwatermarkextender id="TextBoxWatermark" runat="server" targetcontrolid="ClickableTextBox" watermarktext="Paste your messy text here or enter the source file location above" watermarkcssclass="field_input" />

When clicked, it runs this script function, "MessyTextClick()"
That function needs to get the value from text box with ID="TrackClicks"

I am getting into the function MessyTextClick but the script apparently cannot find the IDs of the objects on the page.

I've used very similar code at another place on the page. When the box in that instance is clicked, the box turns red and a help message is displayed in another textbox.The only major difference is TrackClicks and ClickableTextBox exist in the top, main part of the form and the working textboxes are in a subpanel/subform within the main form.

Jim

[Dormilich]

what is the code for that function? (as seen in the browser, of course)

[jimatqsi]

Here is the current code from MessyTextClick()

function MessyTextClick()
{
   var colID = document.getElementById("<%=Col01Label.ClientID%>");
   var clickID = document.getElementById("<%=ActionGuideDescription_label.ClientID%>");
    clickID.innerHTML=clickID.innerHTML+", Fill "+colID.innerHTML ;
    alert ("ClickNo=?");
 
    // findhead1();
 
  // ClickNumberID  = document.getElementById("ClickCounter_hidden");
   ClickNumberID= document.getElementById('<%=TrackClicks.ClientID%>');
    if (ClickNumberID==null) 
    {
        ClickNumberID = document.getElementById("TrackClicks").id;
    }
   if (ClickNumberID==null)
   {
       ClickNumberID=document.getElementsByTagName("TrackClicks.tagName");
   }
//      alert("ClickNumberID.innerHTML "+ClickNumberID.innerHTML)
       if (ClickNumberID!=null)
    {
        iClickNo = parseInt(ClickNumberID.value) ; // Text?   innerHTML
    }
    alert ("ClickNo="+iClickNo);
    if (iClickNo<=0)
    {
        iClickNo=01;
    }
   PageMethods.GetClickAction(iClickNo, ProcessClick);  ////////////////////////////////////////////
}
 

[Dormilich]

if that’s what shows up in your browser, then your ASP is not working.

[jimatqsi]

I've added some code to try other objects but I always get the same result. Yet those first 3 lines in another function in the same script works okay, but in this script they fail because the IDs cannot be found.

Jim

[jimatqsi]

Right, sorry you did say in my browser ... okay, so I am now viewing the page source in my browser. It's over 3300 lines of code. If I search for the name of my javascript function MessyTextClick it is not found. What does that mean?

Jim

[Dormilich]

maybe it’s in an external file? can I have a link to your page?

[jimatqsi]

It's not yet published. All the javascript is within the page.

I was asleep, I didn't navigate to the right page before getting the source code. Here's what is in the browser for the function:

function MessyTextClick()
{
   var colID = document.getElementById("ctl00_PageContent_ProjectsTabContainer_ColumndataTabPanel_Col01Label");
   var clickID = document.getElementById("ctl00_PageContent_ProjectsTabContainer_ColumndataTabPanel_ActionGuideDescription_label");
    clickID.innerHTML=clickID.innerHTML+", Fill "+colID.innerHTML ;
    alert ("ClickNo=?");
 
    // findhead1();
 
  // ClickNumberID  = document.getElementById("ClickCounter_hidden");
   ClickNumberID= document.getElementById('ctl00_PageContent_ProjectsTabContainer_ColumndataTabPanel_TrackClicks');
    if (ClickNumberID==null) 
    {
        ClickNumberID = document.getElementById("TrackClicks").id;
    }
   if (ClickNumberID==null)
   {
       ClickNumberID=document.getElementsByTagName("TrackClicks.tagName");
   }
//      alert("ClickNumberID.innerHTML "+ClickNumberID.innerHTML)
       if (ClickNumberID!=null)
    {
        iClickNo = parseInt(ClickNumberID.value) ; // Text?   innerHTML
    }
    alert ("ClickNo="+iClickNo);
    if (iClickNo<=0)
    {
        iClickNo=01;
    }
   PageMethods.GetClickAction(iClickNo, ProcessClick);  ////////////////////////////////////////////
}

[Dormilich]

you have that long IDs?

"TrackClicks.tagName" seems to be a somewhat strange ID, are you sure it exists?

[jimatqsi]

No, that's not an ID, it's another property. The findhead() function I listed in an earlier post was originally written to list all the tagNames of objects on the page. I copied and changed it to show me the IDs. I thought I would try to look up this object by tagName but that instruction looks silly to me now.

I've been working on this for 2 days. More and more crud is creeping into it as I try variations of the same thing.

Here's my revised version of the findhead function I found on the 'Net.

function findhead1()
{
    var tag, tags;
    tags = "The ClientIDs in the page are:"
    for(i = 0; i < document.all.length; i++)
    {
  //      tag = document.all(i).tagName;
        tag= document.all(i).id+document.all(i).ClientID
        var strN=document.all(i).id+document.all(i).tagName
        //x=document.getElementById("myHeader")
        if (strN.indexOf("TrackClicks")>0)
        {
            alert("Found ClientID:"+document.all(i).id+document.all(i).ClientID);
        }
        tags = tags + "\n" + tag;
    }
    document.write(tags);
}

[Dormilich]

can’t really say anything to it since it is IE-only syntax.

[jimatqsi]

@Dormilich
Oh, really? I have to redo it then, I want it to be browser agnostic <sigh> ... I think my original problem had to do with one instruction referencing .ClientID when it should have been .ID. After Christmas I'll start over. Thanks very much for your help.

Jim