How do I get chrome to re-render elements BEFORE showing alert?

Question

0.00/5 (No votes)

See more:

In a validation script, I set the class of invalid elements so that they are rendered in red, then display an alert asking the user to correct the highlighted errors.
However in Chrome, the alert is displayed before the element is re-drawn. This could lead to confusion for the user since there are no highlighted fields.
When you step through the code, all works fine as the page is redrawn at each step.

In Firefox, the browser displays a semi-transparent background behind the alert box, and the rendering of the error input box is updated before the alert. Edge behaves similarly (but with a white semi-transparent layer instead of black). IE also redraws the error field but doesn't use the semi-transparent layer.

What I have tried:

Although it seems the "wrong" approach, I tried putting the alert into a setTimeout call, delaying the alert by a second (or more or less). However this doesn't have the required effect; the re-render of the highlighted input box still doesn't occur until after the alert box is shown.

I've also tried

JavaScript

$('#txtDemo').hide().show()

but no help...
Googling suggests others have had similar problems and found that querying the offsetHeight may force Chrome to redraw, but that workaround doesn't work in current versions of Chrome.

See my demo page at codeproject.derektp.co.uk/sequence.htm[^]

Posted 31-Oct-19 11:07am

DerekT-P

Updated 31-Oct-19 15:07pm

Add a Solution

2 solutions

Solution 1

Not a solution for this; but a suggestion or two...

Don't use the generic "alert" function. Try using a Modal window and give the end user a pleasanter experience. A great example would be phone number validation, where you could give various formats that are accepted.

Another option would be to have two separate validation routines; one changing the color to red on various events (onblur, etc) to change the color, and then the "submit" validation which pops up that they have fields to fix

Posted 31-Oct-19 11:29am

MadMyche

Comments

F-ES Sitecore 1-Nov-19 5:31am

I wouldn't even use a modal, just leave the fields red and show a message under each box saying what the problem is.

DerekT-P 1-Nov-19 18:16pm

Thanks MadMyche and F-ES Sitecore for your suggestions. In this instance the message is only shown if the user tries to submit the form without first at least having tabbed through the form fields. If a field is invalid on "Blur" then it's flagged as an error immediately, so the need for an explicit pop-up message is just as a "back-stop" and should be rarely encountered. There's a (low) fixed budget and even swapping a simple "alert" statement for a modal popup takes development and testing time for a feature which will only be very rarely used. In other situations I do use modal messages and/or messages under/next to error fields. A problem with the latter is that they can make the form layout "jump around" (or at least the window to scroll) which can be irritating. On the desktop I prefer to use mouseover pop-ups (non-modal) to give additional feedback, but they're not so great on mobile devices.

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Dar Brett · Accepted Answer · 2019-10-31T15:08:00

It might be worth it to read this: Concurrency model and the event loop - JavaScript | MDN[^]

Basically your solution of using setTimeout should work something like this CodePen[^], if you compare that to your attempt at using set timeout I think you'll find you probably accidentally moved the code setting the class inside the setTimeout event handler - if not you should post that code as well.

The problem you're have can be explained by how browsers render the page. Essentially the browser is single threaded, and the browser rendering is paused while your code is executing, and will do all updates after your code finishes running.

The reason calling set timeout for a single millisecond works, is that it finishes executing your code for the browser to run one render pass, and then executes the timeout event as soon as the render has completed.