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

J

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

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

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

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

Randy Webb

Dr John Stockton said the following on 1/18/2006 11:14 AM:
JRS: In article <[email protected]>, dated
Tue, 17 Jan 2006 11:53:21 remote, seen in

Oversize signatures.

(e-mail address removed)

File a complaint if it is that significant to you.
 

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

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,905
Latest member
Kristy_Poole

Latest Threads

Top