control id rendered correctly but still getting javascript error

Question

Error :

Microsoft JScript runtime error: 'ctl00_ContentPlaceHolder1_txtAdmDate' is undefined

Code :

<input ID="txtAdmDate" runat="server" readonly="readonly" type="text" 
                                        tabindex="23" clientidmode="AutoID" />
    <a href="#" onclick="showCalendarControl(ctl00_ContentPlaceHolder1_txtAdmDate)">
                                    <img border="0" src="images/SmallCalendar.jpg" 
                                        style="width: 20px; height: 20px" /></a>

Javascript:

function showCalendarControl(textField) {
      calendarControl.show(textField);
    }

html rendered Source :

<input name="ctl00$ContentPlaceHolder1$txtAdmDate" type="text" id="ctl00_ContentPlaceHolder1_txtAdmDate" readonly="readonly" tabindex="23" />
       <a href="#" onclick="showCalendarControl(ctl00_ContentPlaceHolder1_txtAdmDate)">
        <img border="0" src="images/SmallCalendar.jpg" 
                                        style="width: 20px; height: 20px" /></a>

Problem :

Though the html rendered source shows that the id of control is ctl00_ContentPlaceHolder1_txtAdmDate and the same is passed to the javascript function error is generated.I have tried setting clientidmode to Autoid and static but nothing works. Need help from you guys to solve this issue.

What does your calendarControl.show method expect - is it a string of the ID (as that's not what it's getting at present)? Also, what error are you getting? — Paddy, Jul 25 '11 at 09:45

score 0 · Answer 1 · answered Jul 25 '11 at 09:47

When you say this:

showCalendarControl(ctl00_ContentPlaceHolder1_txtAdmDate)

You're assuming that ctl00_ContentPlaceHolder1_txtAdmDate is a variable but it isn't a variable, it is just a DOM id attribute. You could say this:

showCalendarControl(document.getElementById('ctl00_ContentPlaceHolder1_txtAdmDate'))

to turn it into an object inside the function call or you could send an ID to showCalendarControl and let it turn the ID into an object:

onclick="showCalendarControl('ctl00_ContentPlaceHolder1_txtAdmDate')"

and then adjust showCalendarControl:

function showCalendarControl(textFieldId) {
    var textField = document.getElementById(textFieldId);
    calendarControl.show(textField);
}

Thanks first solution given by you works for me.Second one still gives the same error.I will work on it in my free time.Cheers :) — mkkvs, Jul 28 '11 at 05:15
@mkkvs: Mike clearly knows his ASP.net better than me (but so does a rock to be honest) he deserves it more than me. — mu is too short, Jul 28 '11 at 05:20

score 0 · Accepted Answer · answered Jul 25 '11 at 09:48

First, it looks like you are inside a Master Page or User Control (hence the name mangling), and in that case you should not assume how the name will be mangled by hardcoding it. If you use a different master page or move the User Control to another page, this the mangled name could be different. To resolve that, use the ClientID property instead.

Also, you can't just reference the control directly by name to have Javascript find it, because the controls are not global variables. Instead, you can use document.getElementById to look get a handle to the control.

<a href="#" onclick="showCalendarControl(document.getElementById('<%=txtAdmDate.ClientID%>')">

control id rendered correctly but still getting javascript error

Problem :

2 Answers2