calendarxp Site Admin
Joined: 30 Jan 2005 Posts: 409
|
Posted: Sun Feb 27, 2005 10:32 pm Post subject: How to convert the HTML demos into ASP.NET? |
|
|
After converting the HTML form tags into asp.net controls, some users got a javascript error message saying "xxxx is null or not an object". Why?
It's because the conversion wasn't done properly.
For example, if we have a HTML form as following:
Code: | <form name="demoform">
<input type="text" name="datefield"><a href="javascript:void(0)" onclick="if(self.gfPop)gfPop.fPopCalendar(document.demoform.datefield);return false;">...</a>
</form> |
some people thought the following asp.net code is equivalent:
Code: | <form name="demoform" runat="server">
<asp:TextBox name="datefield" runat="server" /><a href="javascript:void(0)" onclick="if(self.gfPop)gfPop.fPopCalendar(document.demoform.datefield);return false;">...</a>
</form> |
However, it's NOT! The correct one should be as following:
Code: | <form id="demoform" runat="server">
<asp:TextBox id="datefield" runat="server" /><a href="javascript:void(0)" onclick="if(self.gfPop)gfPop.fPopCalendar(document.demoform.datefield);return false;">...</a>
</form> |
So what's the difference between using id and name? Simply upload them to your asp.net server and select "view source" from your browser on the generated page. You'll notice that both of them generate a HTML input tag enclosed by a HTML form tag. But the formal example gets a randomized form name and field name, while the latter one retains the name of "demoform" and "datefield" - it very well explains why people using the formal one were getting the javascript error - if you don't specify the id of asp.net controls, asp.net will assign a randomized name for the generated HTML code, which for sure cannot be recognized by your javascript code.
NOTE: if you don't know or have no control of the form id, you may also reference the field directly with a simple getElementById() call:
Code: | <form runat="server">
<asp:TextBox id="datefield" runat="server" /><a href="javascript:void(0)" onclick="if(self.gfPop)gfPop.fPopCalendar(document.getElementById("datefield"));return false;">...</a>
</form> |
To recap, whenever you try to convert javascript-enabled HTML pages into asp.net, you should always set the id property of the form tag and textbox tags to be the same as the name property of their HTML counterparts.
_________________ Copyright 2003-2011 Idemfactor Solutions, Inc. All rights reserved. |
|