1

I'm using a custom TimeSelector, which I place on the page in HTML as follows:

   <MKB:TimeSelector DisplaySeconds="false" ID="endTimeSelector" runat="server" Visible="True" Date="5:30 PM" />

In a Javascript function, I'd like to update the Date attribute. I've tried these (which don't work):

   var sel = document.getElementById("endTimeSelector");
   sel.Date="6:30 PM";
   sel.setAttribute("Date","6:30 PM");

Since this is a custom selector, I don't expect an answer specific to this component. I guess I'm just asking if there is a general solution for updating HTML attributes from Javascript (without going to the server first).

EDIT: Okay, so the reason it's not working is that that's not the real ID due to ASP. Indeed, here is the real HTML:

<span id="endTimeSelector"><table CellSpacing="0" CellPadding="0" style="border-collapse:collapse;border-style:None;border-width:0px;">
                <tr>
                    <td style="vertical-align:Bottom;"><input id="endTimeSelector_txtHour" name="endTimeSelector" onclick="this.select();lastFocusCtrl=this;" onchange="intOnly(this,12);" onFocus="this.select();lastFocusCtrl=this;" onKeyDown="return updownArrow(event, this,12,15,1);" cols="2" maxlength="2" value="05" style="height:15px;border-bottom:solid 1px Silver;border-left:solid 1px Silver;border-top:solid 1px Silver;background-color:;border-right:none;width:17px;font-size:9pt;" /><input readonly="readonly" cols="1" maxlength="1" value=":" onclick="this.nextSibling.focus();//this.blur();return false;" onfocus="this.nextSibling.focus();//blur();return false;" style="height:15px;border-bottom:solid 1px Silver;border-left:none;border-right:none;border-top:solid 1px Silver;background-color:;font-size:9pt;width:4px;" /><input id="endTimeSelector_txtMinute" name="endTimeSelector_txtMinute" onclick="this.select();lastFocusCtrl=this;" onchange="intOnly(this,12);" onFocus="this.select();lastFocusCtrl=this;" onKeyDown="return updownArrow(event, this,12,15,1);" cols="2" maxlength="2" value="30" style="height:15px;border-bottom:solid 1px Silver;border-left:none;border-top:solid 1px Silver;background-color:;border-right:none;width:17px;font-size:9pt;" /><input id="endTimeSelector_txtAmPm" name="endTimeSelector_txtAmPm" readonly="readonly" onclick="this.select();lastFocusCtrl=this;" onchange="keepAmPm();" onFocus="this.select();lastFocusCtrl=this;" onKeyDown="return updownArrow(event, this,12,15,1);" cols="2" maxlength="2" value="PM" style="height:15px;border-bottom:solid 1px Silver;border-left:none;border-right:solid 1px Silver;border-top:solid 1px Silver;background-color:;width:22px;font-size:9pt;" /></td><td><img id="endTimeSelector_imgUp" onclick="addTime(this,12,15,1);" src="/WebResource.axd?d=tiVFNiu7HJgIVjO35sllj-s8Z6xcGnuxvWjcv0djLK_ZmlnEvSWKeuPozcoAJ1jdWjt3Em28mdAuVmJ3sjSDr9LkBqj6QzQZ5DI3R2uqFhoN8cDn0&amp;t=634103086365158927" onMouseOver="this.src='/WebResource.axd?d=Qwp1CEy_uAYBRj85nDAQgbZhe_gPeEn6uH400SE9Ka9Ba6-0jO725XcMqD-0COZumHZlpEmorXnDALAg08OiLidM1LQwMWqOZjS8k7tAw7ECNag4Bf2m7vLYgXi_qGcGiYyX_A2&amp;t=634103086365158927';" onMouseOut="this.src='/WebResource.axd?d=tiVFNiu7HJgIVjO35sllj-s8Z6xcGnuxvWjcv0djLK_ZmlnEvSWKeuPozcoAJ1jdWjt3Em28mdAuVmJ3sjSDr9LkBqj6QzQZ5DI3R2uqFhoN8cDn0&amp;t=634103086365158927';" style="cursor:pointer;" /><br /><img id="endTimeSelector_imgDown" onclick="subtractTime(this,12,15,1);" src="/WebResource.axd?d=RVSDbruLRZ0XghTuQh3hchhyT2e1a6SFSCXTFMsJE6ux0Q-eu595sEnqVZjLRVJIk8d1eraE2M2gVUNfg53pgpfVC5Zpok9BfW7SZbqS5Cw5--R20&amp;t=634103086365158927" onMouseOver="this.src='/WebResource.axd?d=AKuxDQkfX9IrXbNQV4GNdTNCDKooNjlZXtJpRgDvjUm7-6FL0ZGTizlx50cTntULqw3ZuEaV7CYV4hWPZa9ZdVWCsPfPrSyKMGJNDRWsBYHpdYUH1HrLPbbaesYkf-cDXlZ_-w2&amp;t=634103086365158927';" onMouseOut="this.src='/WebResource.axd?d=RVSDbruLRZ0XghTuQh3hchhyT2e1a6SFSCXTFMsJE6ux0Q-eu595sEnqVZjLRVJIk8d1eraE2M2gVUNfg53pgpfVC5Zpok9BfW7SZbqS5Cw5--R20&amp;t=634103086365158927';" style="cursor:pointer;" /></td>

                </tr>
            </table></span>

Yikes, that's ugly. There is no longer any attribute called "Date".

Edit 2: Does this mean that it's impossible to update the date attribute directly?

What if I do something like set Date to the value of some variable, and update the variable?

Jeremy
  • 5,365
  • 14
  • 51
  • 80

2 Answers2

2

Check the Control.ClientID property.

This line:

var sel = document.getElementById("endTimeSelector");

needs to be:

var sel = document.getElementById("<%= endTimeSelector.ClientID %>");

This is a classic mistake in that what you have isn't HTML, it is simply a syntax upon which ASP.NET transforms into HTML and in doing this changes the control ID's. Check the HTML using by viewing the source in your browser - I think you'll find it's much different from what you've written!

m.edmondson
  • 30,382
  • 27
  • 123
  • 206
0

to do this you must access the html control itself inside you custom control. try to get the html control then set its value with the value you want.you can do this using jquery as follows:

$('#HTMLControlID').attr('attributeName','value');

or 

$('#HTMLControlID').prop('attributeName','value'); //jquery 1.6
Amir Ismail
  • 3,865
  • 3
  • 20
  • 33