[thelist] How to abstract this script?

Chris Heilmann lists at onlinetools.org
Wed Mar 9 11:49:29 CST 2005


>
> --- Matt Warden <mwarden at gmail.com> wrote:
>><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><>
>> Yes, well that's your problem. You need to make them related.
>> I would suggest a DOM approach. Maybe something like this:
>>
>> <div>
>> <input type="text" name="serviceDate" id="serviceDate" /> <a
>> href="error.html"
>> onclick="ShowCalendar(document.forms['service'].elements['serviceDate'].value);
>> return false;">
>> <img src="calendar-icon.gif" alt="" border="0" /></a> <div
>> id="calendar"></div>
>> </div>
>>
>> I would do ShowCalendar(this.parentNode) and then modify ShowCalendar
>> to do a passedNode.getElementsByTagName('input'), etc. It would also
>> allow you to more easily convert your script in the future to (as
>> Chris would say) unobtrusive JavaScript, rather than putting the call
>> directly into your markup, regardless of whether JS is on.
>><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><>
>
> Hmm..that might solve my other problem too. Right now I have them wrapped
> in an A which allows me
> to grab the input in an init function:
>
> var oNodes = oLink.childNodes;
> ShowCalendar(oNodes[0].value, oNodes[0]);
>
> It's all working and abstracted now (except for the calendar DIV id, but
> I'm only using one and
> throwing all calendars into it) - but this makes the input box clickable.
> That's kind of odd -
> what if I just want to type in my date? That could be frustrating. I'm
> also placing the calendar
> based on the mouse click location - which puts the calendar on top of the
> input sometimes, again,
> kind of odd.
>
> Anyway - I'm not familiar with passedNode and Google came up empty on
> that, nor do I see it in
> O'Reilly - is that a typo or can your provide a reference?

passednode is an object name matt came up with.
Did you take a look at the unobtrusive course example I posted which
explains _in detail_ exactly what you want to do?

your

> var oNodes = oLink.childNodes;
> ShowCalendar(oNodes[0].value, oNodes[0]);

can choke on whitespace in Mozilla.




More information about the thelist mailing list