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

[James Black]

'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.visi bility="hidden";
var mydiv = document.getElementById("contentarea");
mydiv.innerHTML = "Validating the form.";
mydiv.style.visibility="visible";
var ret = validateForm();

[Randy Webb]

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.visi bility="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.

[James Black]

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

[Randy Webb]

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.

[Jasen Betts]

On 2006-01-17, James Black <pl***********@gmail.com> wrote:

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

the changes are made immediately but not rendered until the script ends.
make the script end sooner.
Bye.
Jasen

[Dr John Stockton]

JRS: In article <N5******************************@comcast.com>, dated
Tue, 17 Jan 2006 11:53:21 remote, seen in news:comp.lang.javascript,
Randy Webb <Hi************@aol.com> 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)

[Randy Webb]

Dr John Stockton said the following on 1/18/2006 11:14 AM:

JRS: In article <N5******************************@comcast.com>, dated
Tue, 17 Jan 2006 11:53:21 remote, seen in news:comp.lang.javascript,
Randy Webb <Hi************@aol.com> 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.

ab***@comcast.net

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/