Determine if a control exists in javascript

M

Melbfella

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.
 
D

David Dorward

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';
}
 
R

RobG

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.
 
T

Thomas 'PointedEars' Lahn

RobG said:
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
 
T

Thomas 'PointedEars' Lahn

Melbfella said:
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
 
M

Melbfella

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';

}


Thanks heaps David - this code worked a treat :)
 
R

RobG

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.

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.
 
D

David Dorward

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.
 
T

Thomas 'PointedEars' Lahn

RobG said:
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.
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.
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
 
T

Thomas 'PointedEars' Lahn

David said:
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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top