DatePicker no longer working after changing a C# webapp to use a master page.

Question

I'm working on a .Net/C# web application and had been using a javascript based calendar to allow users to select dates. This has been working fine.

Today I changed the code to include a master page and the datepicker which is called from a childpage has stopped working, the problem being that the Textbox which the date is returned to is no longer valid, due to the fact the form declaration now sits on the master page.

The code is href="javascript:;" onclick="calendarPicker('form1.TBApplyDate');" title="Select Date from Calendar">Select

"Error Line: 1 Error: 'window.opener.document.form1.TBApplyDate' is null or not an object"

I've seen plenty of examples online of collecting the textbox client ID and passing that in the various permutations below, but I always get the same error.

href="javascript:;" onclick="calendarPicker('ctl00_MainContent_TBApplyDate');" title="Select Date from Calendar">Select

href="javascript:;" onclick="calendarPicker(form1.<%=TBApplyDate.ClientID%>');" title="Select Date from Calendar">Select

Can anyone provide any help on how I can reference the textbox succesfully?

Thanks in advance.

Answer 1

It is because element IDs get "mangled" by the Master Page

I would recommend using jQuery and its selectors to help you grab the necessary controls

In jquery you can grab a control like this:

$('[id$=myContrl]')

Therefore you should be able to do this

<a href="javascript:;" onclick="calendarPicker($('[id$=TBApplyDate]'));" title="Select Date from Calendar">Select</a>

Edit: You can also try this

<a href="javascript:;" onclick="calendarPicker($('#<%= TBApplyDate.ClientID %>'));" title="Select Date from Calendar">Select</a>

Answer 2

Right click on your browser and view source and make sure the ID of the textbox and the ID specified in your jQuery routine are the same. If not, use @jmein's answer to get the correct client id of the text box.

If they are the same, then there's something wrong with how you have your jquery setup.