Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Determine if a control exists in javascript

Reply
Thread Tools

Determine if a control exists in javascript

 
 
Melbfella
Guest
Posts: n/a
 
      10-07-2007
G'day All,

I'm creating a classic ASP page that draws pieces dynamically.

In some cases, I need to draw a <select> tag and populate it.

I then want to hide this control immediately and pop it back up if the
users chooses the corresponding checkbox.

I have the pop up part nailed, but hiding it when the page loads is
eluding me....

This javascript code works well to hide it, if it exists :
frmMain.cboJumpOffPoint.style.display='none';

The problem is, if I haven't drawn the <select> tag, the code fails...

Is there a way to determine if a control exists in javascript before I
attempt to hide it?

Thanks in advance,

Doug.

 
Reply With Quote
 
 
 
 
David Dorward
Guest
Posts: n/a
 
      10-07-2007
On Oct 7, 4:03 pm, Melbfella <(E-Mail Removed)> wrote:
> This javascript code works well to hide it, if it exists :
> frmMain.cboJumpOffPoint.style.display='none';
>
> The problem is, if I haven't drawn the <select> tag, the code fails...
>
> Is there a way to determine if a control exists in javascript before I
> attempt to hide it?


var select = document.forms['frmMain'].elements['cboJumpOffPoint'];
if (select) {
select.style.display = 'none';
}

--
David Dorward
http://dorward.me.uk/
http://blog.dorward.me.uk/

 
Reply With Quote
 
 
 
 
RobG
Guest
Posts: n/a
 
      10-07-2007
On Oct 8, 1:03 am, Melbfella <(E-Mail Removed)> wrote:
> G'day All,
>
> I'm creating a classic ASP page that draws pieces dynamically.
>
> In some cases, I need to draw a <select> tag and populate it.
>
> I then want to hide this control immediately and pop it back up if the
> users chooses the corresponding checkbox.
>
> I have the pop up part nailed, but hiding it when the page loads is
> eluding me....
>
> This javascript code works well to hide it, if it exists :
> frmMain.cboJumpOffPoint.style.display='none';
>
> The problem is, if I haven't drawn the <select> tag, the code fails...


Give it a class, then modify the class rule in the style sheet to
toggle the element's visibility display attribute. That way it
doesn't matter whether the control exists or not when you do it.

You will need to address usability issues for those with javascript
disabled.

--
Rob

 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      10-07-2007
RobG wrote:
> On Oct 8, 1:03 am, Melbfella <(E-Mail Removed)> wrote:
>> I'm creating a classic ASP page that draws pieces dynamically.
>>
>> In some cases, I need to draw a <select> tag and populate it.
>>
>> I then want to hide this control immediately and pop it back up if the
>> users chooses the corresponding checkbox.
>>
>> I have the pop up part nailed, but hiding it when the page loads is
>> eluding me....
>>
>> This javascript code works well to hide it, if it exists :
>> frmMain.cboJumpOffPoint.style.display='none';
>>
>> The problem is, if I haven't drawn the <select> tag, the code fails...

>
> Give it a class, then modify the class rule in the style sheet to
> toggle the element's visibility display attribute. That way it
> doesn't matter whether the control exists or not when you do it.


Pardon? If they use a CSS class, they will still have to test whether or
not the element object exists that they are setting the className property
of. I would consider the CSS class less compatible overkill here, though.

However, the solution to the OP's problem is much simpler: if there should
not run such a script when there is no such control, one does generate
script and control, or none of them. The document is ASP-generated, after all.

> You will need to address usability issues for those with javascript
> disabled.


They will not if the script hides the control onload the document, if that
would be necessary (here).


PointedEars
--
realism: HTML 4.01 Strict
evangelism: XHTML 1.0 Strict
madness: XHTML 1.1 as application/xhtml+xml
-- Bjoern Hoehrmann
 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      10-07-2007
Melbfella wrote:
> In some cases, I need to draw a <select> tag and populate it.
>
> I then want to hide this control immediately and pop it back up if the
> users chooses the corresponding checkbox.
>
> I have the pop up part nailed, but hiding it when the page loads is
> eluding me....
>
> This javascript code works well to hide it, i$f it exists :
> frmMain.cboJumpOffPoint.style.display='none';
>
> The problem is, if I haven't drawn the <select> tag, the code fails...


So the most simple and most reliable approach is not to generate the above
script code in that case in the first place. Which makes it an *ASP* problem.

> Is there a way to determine if a control exists in javascript before I
> attempt to hide it?


Yes, there is as well. Short answer: you test whether there is a
corresponding element object.

But first of all, you are _not_ drawing a control. You are generating an
element that may or may not be drawn (rendered) by the layout engine of the
user agent.

Second, your referencing should look like

document.forms['frmMain'].elements['cboJumpOffPoint'].style.display =
'none';

which is not only backwards-compatible (to DOM Level 0, as your approach)
but also standards compliant (DOM Level 2 HTML).

Third, you will not need the whole reference if the element that causes the
event is a control in the same form as the target control:

<input type="checkbox" ...
onclick="this.form.elements['cboJumpOffPoint'].style.display = '';">

So finally, a client-side solution could be

<script type="text/javascript">
function showHideSelect(o)
{
var f, es, t;
if (o && (f = o.form) && (es = f.elements)
&& (t = es['cboJumpOffPoint'])
&& typeof t.style != "undefined"
&& typeof t.style.display != "undefined")
{
t.style.display = (!!o.checked ? '' : 'none');
}
}
</script>

<body onload="showHideSelect(document.forms['frmMain'].elements['cb']);">
<form action="...">
<input type="checkbox" name="cb" ... onclick="showHideSelect(this);">
<select size="1" name="cboJumpOffPoint">
...
</select>
</form>

It is probably better not to hide/show the `select' element but to
disable/enable it instead.

But, as I said, you should solve this server-side instead.


HTH

PointedEars
--
var bugRiddenCrashPronePieceOfJunk = (
navigator.userAgent.indexOf('MSIE 5') != -1
&& navigator.userAgent.indexOf('Mac') != -1
) // Plone, register_function.js:16
 
Reply With Quote
 
Melbfella
Guest
Posts: n/a
 
      10-07-2007
On Oct 8, 1:35 am, David Dorward <(E-Mail Removed)> wrote:
> On Oct 7, 4:03 pm, Melbfella <(E-Mail Removed)> wrote:
>
> > This javascript code works well to hide it, if it exists :
> > frmMain.cboJumpOffPoint.style.display='none';

>
> > The problem is, if I haven't drawn the <select> tag, the code fails...

>
> > Is there a way to determine if a control exists in javascript before I
> > attempt to hide it?

>
> var select = document.forms['frmMain'].elements['cboJumpOffPoint'];
> if (select) {
> select.style.display = 'none';
>
> }
>
> --
> David Dorwardhttp://dorward.me.uk/http://blog.dorward.me.uk/



Thanks heaps David - this code worked a treat

 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      10-08-2007
On Oct 8, 7:34 am, Thomas 'PointedEars' Lahn <(E-Mail Removed)>
wrote:
> RobG wrote:
> > On Oct 8, 1:03 am, Melbfella <(E-Mail Removed)> wrote:
> >> I'm creating a classic ASP page that draws pieces dynamically.

>
> >> In some cases, I need to draw a <select> tag and populate it.

>
> >> I then want to hide this control immediately and pop it back up if the
> >> users chooses the corresponding checkbox.

>
> >> I have the pop up part nailed, but hiding it when the page loads is
> >> eluding me....

>
> >> This javascript code works well to hide it, if it exists :
> >> frmMain.cboJumpOffPoint.style.display='none';

>
> >> The problem is, if I haven't drawn the <select> tag, the code fails...

>
> > Give it a class, then modify the class rule in the style sheet to
> > toggle the element's visibility display attribute. That way it
> > doesn't matter whether the control exists or not when you do it.

>
> Pardon? If they use a CSS class, they will still have to test whether or
> not the element object exists that they are setting the className property
> of.


Pardon? Setting a rule based on a class selector is totally
independent of whether the element exists or not. The class should be
added to the element whenever it is created. An ID selector could be
used to.


> I would consider the CSS class less compatible overkill here, though.


"Less compatible overkill", I must remember that.


>
> However, the solution to the OP's problem is much simpler: if there should
> not run such a script when there is no such control, one does generate
> script and control, or none of them. The document is ASP-generated, after all.


The server technology is irrelevant.


> > You will need to address usability issues for those with javascript
> > disabled.

>
> They will not if the script hides the control onload the document, if that
> would be necessary (here).


Hiding an element onload creates its own usability issue - it may well
be visible when first rendered, then hidden when the rest of the
document finishes loading.

If you hide it using a stylesheet, then whenever it is rendered it
will already have the correct display attribute. And if the
stylesheet is included by script, and scripting is disabled, the
control isn't hidden.


--
Rob

 
Reply With Quote
 
David Dorward
Guest
Posts: n/a
 
      10-08-2007
On Oct 7, 10:15 pm, RobG <(E-Mail Removed)> wrote:

> Give it a class, then modify the class rule in the style sheet to
> toggle the element's visibility display attribute. That way it
> doesn't matter whether the control exists or not when you do it.


Is there a well supported method to do this yet? Last time I looked
into it, I seem to recall that one browser supported the standard
method, one supported a proprietary method, and the others didn't
support any method.

--
David Dorward
http://dorward.me.uk/
http://blog.dorward.me.uk/

 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      10-08-2007
RobG wrote:
> On Oct 8, 7:34 am, Thomas 'PointedEars' Lahn <(E-Mail Removed)>
> wrote:
>> RobG wrote:
>>> On Oct 8, 1:03 am, Melbfella <(E-Mail Removed)> wrote:
>>>> I'm creating a classic ASP page that draws pieces dynamically.
>>>> In some cases, I need to draw a <select> tag and populate it.
>>>> I then want to hide this control immediately and pop it back up if the
>>>> users chooses the corresponding checkbox.
>>>> I have the pop up part nailed, but hiding it when the page loads is
>>>> eluding me....
>>>> This javascript code works well to hide it, if it exists :
>>>> frmMain.cboJumpOffPoint.style.display='none';
>>>> The problem is, if I haven't drawn the <select> tag, the code fails...
>>> Give it a class, then modify the class rule in the style sheet to
>>> toggle the element's visibility display attribute. That way it
>>> doesn't matter whether the control exists or not when you do it.

>> Pardon? If they use a CSS class, they will still have to test whether or
>> not the element object exists that they are setting the className property
>> of.

>
> Pardon? Setting a rule based on a class selector is totally
> independent of whether the element exists or not. The class should be
> added to the element whenever it is created. An ID selector could be
> used to.


Apparently I misunderstood you. However, modifying a stylesheet rule as you
propose is much less compatible than just setting the `className' property,
which is less compatible than setting the `style' property's property, of an
element.

>> However, the solution to the OP's problem is much simpler: if there should
>> not run such a script when there is no such control, one does generate
>> script and control, or none of them. The document is ASP-generated, after all.

>
> The server technology is irrelevant.


It's not. The OP has the problem that there is script code generated that
attempts to hide an element which fails when that element is not generated
by the server-side script. The most simple and fully compatible solution
is not to generate the script code in that case, too.

>>> You will need to address usability issues for those with javascript
>>> disabled.

>> They will not if the script hides the control onload the document, if that
>> would be necessary (here).

>
> Hiding an element onload creates its own usability issue - it may well
> be visible when first rendered, then hidden when the rest of the
> document finishes loading.


Given the speed an HTML document of reasonable size is downloaded and
rendered, I would consider this issue to be negligible.

But if one is concerned about that, one could use the `script' and the
`noscript' element, where the `script' element would generate the element
client-side with an appropriate style sheet. Or one can attempt to hide
the element shortly after it was rendered, by putting the script code
(along with feature tests) there. I would prefer the former alternative then.

> If you hide it using a stylesheet, then whenever it is rendered it
> will already have the correct display attribute. And if the
> stylesheet is included by script, and scripting is disabled, the
> control isn't hidden.


However, this will break sooner or later in NN4 due to the NRLB, and
we wanted it to degrade gracefully, to be accessible.

Therefore, I would rather not hide the control but disable it with
stylesheet scripting onload the document.


PointedEars
--
Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee
 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      10-08-2007
David Dorward wrote:
> On Oct 7, 10:15 pm, RobG <(E-Mail Removed)> wrote:
>> Give it a class, then modify the class rule in the style sheet to
>> toggle the element's visibility display attribute. That way it
>> doesn't matter whether the control exists or not when you do it.

>
> Is there a well supported method to do this yet? Last time I looked
> into it, I seem to recall that one browser supported the standard
> method, one supported a proprietary method, and the others didn't
> support any method.


Provided s/browser/DOM/g, that has not changed.


PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f806at$ail$1$(E-Mail Removed)>
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
How to determine if a Session Variable exists? Shapper ASP .Net 4 09-21-2011 04:35 AM
How to check if a directory exists? folder.exists() does not work! Ulf Meinhardt Java 8 08-28-2009 12:26 PM
finding if file exists or not in apache webdav server and if exists what is the mime type of it.... Totan Java 0 04-17-2006 05:13 AM
Determine if record exists =?Utf-8?B?T3BpZQ==?= ASP .Net 6 02-13-2005 06:09 AM
Using javascript to determine if file exists on host site Daniel Borden Javascript 3 11-10-2003 10:25 PM



Advertisments