Determine if a control exists in javascript

Discussion in 'Javascript' started by Melbfella, Oct 7, 2007.

  1. Melbfella

    Melbfella Guest

    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.
     
    Melbfella, Oct 7, 2007
    #1
    1. Advertising

  2. On Oct 7, 4:03 pm, Melbfella <> 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/
     
    David Dorward, Oct 7, 2007
    #2
    1. Advertising

  3. Melbfella

    RobG Guest

    On Oct 8, 1:03 am, Melbfella <> 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
     
    RobG, Oct 7, 2007
    #3
  4. RobG wrote:
    > On Oct 8, 1:03 am, Melbfella <> 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
     
    Thomas 'PointedEars' Lahn, Oct 7, 2007
    #4
  5. 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
     
    Thomas 'PointedEars' Lahn, Oct 7, 2007
    #5
  6. Melbfella

    Melbfella Guest

    On Oct 8, 1:35 am, David Dorward <> wrote:
    > On Oct 7, 4:03 pm, Melbfella <> 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 :)
     
    Melbfella, Oct 8, 2007
    #6
  7. Melbfella

    RobG Guest

    On Oct 8, 7:34 am, Thomas 'PointedEars' Lahn <>
    wrote:
    > RobG wrote:
    > > On Oct 8, 1:03 am, Melbfella <> 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
     
    RobG, Oct 8, 2007
    #7
  8. On Oct 7, 10:15 pm, RobG <> 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/
     
    David Dorward, Oct 8, 2007
    #8
  9. RobG wrote:
    > On Oct 8, 7:34 am, Thomas 'PointedEars' Lahn <>
    > wrote:
    >> RobG wrote:
    >>> On Oct 8, 1:03 am, Melbfella <> 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
     
    Thomas 'PointedEars' Lahn, Oct 8, 2007
    #9
  10. David Dorward wrote:
    > On Oct 7, 10:15 pm, RobG <> 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$>
     
    Thomas 'PointedEars' Lahn, Oct 8, 2007
    #10
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?T3BpZQ==?=

    Determine if record exists

    =?Utf-8?B?T3BpZQ==?=, Feb 12, 2005, in forum: ASP .Net
    Replies:
    6
    Views:
    8,150
    Joe Fallon
    Feb 13, 2005
  2. Shapper
    Replies:
    4
    Views:
    32,986
  3. Totan
    Replies:
    0
    Views:
    956
    Totan
    Apr 17, 2006
  4. Ulf Meinhardt
    Replies:
    8
    Views:
    6,157
  5. Daniel Borden
    Replies:
    3
    Views:
    121
    Warren Sarle
    Nov 10, 2003
Loading...

Share This Page