browser slow to change state of elements when style changed to hidden

Discussion in 'Javascript' started by James Black, Jan 17, 2006.

  1. James Black

    James Black Guest

    'When my form is submitted, I have onsubmit pointed to the following
    code snippet. But, the button is not actually set to disabled and the
    style.visibility changes are not made for several seconds. It appears
    that it goes into validateForm and doing the rest of this snippet
    before the browser makes the changes.

    How can I get the browser to immediately make the UI change?

    Thanx.

    function submitForm(servleturl) {
    var submitbuttonelem = document.getElementById("submit");
    submitbuttonelem.disabled = true;
    document.getElementById("modgradeform").style.visibility="hidden";
    var mydiv = document.getElementById("contentarea");
    mydiv.innerHTML = "Validating the form.";
    mydiv.style.visibility="visible";
    var ret = validateForm();
    James Black, Jan 17, 2006
    #1
    1. Advertising

  2. James Black

    Randy Webb Guest

    Re: browser slow to change state of elements when style changed tohidden

    James Black said the following on 1/17/2006 11:28 AM:
    > 'When my form is submitted, I have onsubmit pointed to the following
    > code snippet. But, the button is not actually set to disabled and the
    > style.visibility changes are not made for several seconds. It appears
    > that it goes into validateForm and doing the rest of this snippet
    > before the browser makes the changes.
    >
    > How can I get the browser to immediately make the UI change?
    >
    > Thanx.
    >
    > function submitForm(servleturl) {
    > var submitbuttonelem = document.getElementById("submit");


    Are you sure the browser supports gEBI? Feature test for it.

    > submitbuttonelem.disabled = true;


    Feature test to make sure the element supports the disabled attribute.

    > document.getElementById("modgradeform").style.visibility="hidden";


    Feature test to ensure the browser supports .style and .visibility

    > var mydiv = document.getElementById("contentarea");
    > mydiv.innerHTML = "Validating the form.";


    Are you sure the browser supports innerHTML?

    > mydiv.style.visibility="visible";


    Right here, use a setTimeout to set a 10ms timeout to call a second
    function that does form validation. Or, have to functions called
    onsubmit, the first handles pre-submission page changes, the second
    handles validation.

    Sidenote: Are your users so stupid that they don't know that pressing a
    submit button will cause a delay before the next page is shown?


    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
    Answer:It destroys the order of the conversation
    Question: Why?
    Answer: Top-Posting.
    Question: Whats the most annoying thing on Usenet?

    Please quote what you are replying to.

    If you want to post a followup via groups.google.com, don't use the
    "Reply" link at the bottom of the article. Click on "show options" at
    the top of the article, then click on the "Reply" at the bottom of the
    article headers.
    Randy Webb, Jan 17, 2006
    #2
    1. Advertising

  3. James Black

    James Black Guest

    >From what I understand, it is good design to give immediate feedback to
    whatever actions the users make.

    I just don't want them to assume that the click wasn't acknowledged.

    I don't understand how having two functions with the same name will
    work, actually.

    Can you explain that?

    Thanx.
    James Black, Jan 17, 2006
    #3
  4. James Black

    Randy Webb Guest

    Re: browser slow to change state of elements when style changed tohidden

    James Black said the following on 1/17/2006 3:50 PM:

    Please quote what you are replying to.

    If you want to post a followup via groups.google.com, don't use the
    "Reply" link at the bottom of the article. Click on "show options" at
    the top of the article, then click on the "Reply" at the bottom of the
    article headers.

    >>From what I understand, it is good design to give immediate feedback to

    > whatever actions the users make.


    I can agree with that, depending on your definition of immediate.

    > I just don't want them to assume that the click wasn't acknowledged.


    Fair enough.

    > I don't understand how having two functions with the same name will
    > work, actually.


    I didn't say two functions with the same name.

    function function1(){
    //all your visibility/innerHTML code here
    window.setTimeout(function2,60)
    }

    function function2(){
    //validation code here
    }

    The problem you are having where the browser won't update the visual
    display is because it doesn't re-display until *after* the function has
    finished. By then, the form is submitted. Introducing a 60ms delay and
    then executing your validation code will introduce a small enough delay
    to allow the browser to update the visual screen but not enough delay to
    be noticeable to the user.


    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
    Answer:It destroys the order of the conversation
    Question: Why?
    Answer: Top-Posting.
    Question: Whats the most annoying thing on Usenet?

    Please quote what you are replying to.

    If you want to post a followup via groups.google.com, don't use the
    "Reply" link at the bottom of the article. Click on "show options" at
    the top of the article, then click on the "Reply" at the bottom of the
    article headers.
    Randy Webb, Jan 17, 2006
    #4
  5. JRS: In article <>, dated
    Tue, 17 Jan 2006 11:53:21 remote, seen in news:comp.lang.javascript,
    Randy Webb <> posted :
    >
    >--
    >Randy
    >comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    >Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
    >Answer:It destroys the order of the conversation
    >Question: Why?
    >Answer: Top-Posting.
    >Question: Whats the most annoying thing on Usenet?


    Oversize signatures.

    >
    >Please quote what you are replying to.
    >
    >If you want to post a followup via groups.google.com, don't use the
    >"Reply" link at the bottom of the article. Click on "show options" at
    >the top of the article, then click on the "Reply" at the bottom of the
    >article headers.
    >



    --
    © John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 MIME. ©
    Web <URL:http://www.merlyn.demon.co.uk/> - FAQish topics, acronyms, & links.
    Proper <= 4-line sig. separator as above, a line exactly "-- " (SonOfRFC1036)
    Do not Mail News to me. Before a reply, quote with ">" or "> " (SonOfRFC1036)
    Dr John Stockton, Jan 18, 2006
    #5
  6. James Black

    Randy Webb Guest

    Re: browser slow to change state of elements when style changed tohidden

    Dr John Stockton said the following on 1/18/2006 11:14 AM:
    > JRS: In article <>, dated
    > Tue, 17 Jan 2006 11:53:21 remote, seen in news:comp.lang.javascript,
    > Randy Webb <> posted :
    >> --
    >> Randy
    >> comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    >> Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
    >> Answer:It destroys the order of the conversation
    >> Question: Why?
    >> Answer: Top-Posting.
    >> Question: Whats the most annoying thing on Usenet?

    >
    > Oversize signatures.




    File a complaint if it is that significant to you.

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
    Randy Webb, Jan 18, 2006
    #6
    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. Replies:
    1
    Views:
    671
    Rosanne
    Oct 11, 2005
  2. Ken Varn
    Replies:
    0
    Views:
    424
    Ken Varn
    Apr 26, 2004
  3. Dan R Brown
    Replies:
    12
    Views:
    443
    Dom Leonard
    Aug 5, 2003
  4. SolarCanine
    Replies:
    2
    Views:
    250
    SolarCanine
    Sep 20, 2005
  5. mxbrunet
    Replies:
    1
    Views:
    200
Loading...

Share This Page