Newbie question - focus() after alert()

[JRB-Bldr]

As far as Javascript goes I am a newbie - so please be gentle

I have a webpage that someone else developed and I am attempting to make mods to it in order to get things working as needed and as as part of my own learning curve.

I have 2 Select objects which have the same name since they do the same thing but for different circumstances, and they are located in different <div class=''>'s

I want these Selects to be validated at the field-level (not the Submit level) and if the validation fails to return focus() to the object itself.

And through binding, both of these Select objects are running a common FocusOut code - sensitive to the appropriate <div class> section

But when I execute the alert() the focus drops to the next object in the appropriate <div class> section in spite of the alert() being immediately followed by a focus() to the correct object.

How can I get the focus() to go back to the problematic Select object rather than to the next object?

Thanks,
JRB-Bldr

 

[BillyRayPreachersSon]

Does this happen in all browsers, or do some focus the correct element?

Can you show the relevant JS code and HTML for the form, or even post a URL to an online version (or a cut-down test) that shows the problem? It sounds like it could be down to timing, but that's just a guess.

Personally, I don't like it when websites remove control form the user as to how they interact (as you're probably aware from my posts in the Round Table ), and forcibly moving focus to a control sounds like one of those occasions. I don't have any idea about what this form is for, but might it be nicer to use a different method of highlighting the error that doesn't interrupt the user's flow?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

[blue]@[/blue] Twitter:

http://twitter.com/SleepyDrunkDan

 

[JRB-Bldr]

Dan - thank you for the reply.

Yes this is occurring in all browsers.
And I have seen on other web sites references to this type of problem encountered by others.

In fact a Search of this Tek-Tips forum area shows that others have encountered the problem.

A number of the suggestions have recommended using blur() to remove the erroneous focus() and allow the correct focus() to occur.

 

[JRB-Bldr]

Sorry about that - somehow my previous reply got Submitted due to an extraneous key stroke sequence (maybe I'll report it to the RT if it occurs again).

Some examples of other postings on the topic are:
focus problem after alert box.
thread216-865138
Setting focus( ) after an alert box
thread216-763520

Anyway, one very confusing thing to me has been that in most every example of using blur() to resolve the issue there is no use of the (<whatever>).blur()

As a 'newbie' to this language, it is confusing.

Thanks,
JRB-Bldr

 

[vacunita]

Blur is what happens when an element loses focus. An element loses focus because something else acquires the focus.

The process is simple. ElementOne is focused, you click on something else say ElementTwo, and ElementOne loses focus therefor blurring, then ElementTwo gains focus.

What happens is usually you are trying to set focus when an element is loosing focus, that is at the moment it blurs, however you are still in the middle of the focusing process between one element and the other , so you set focus back to ElementOne, but the process continues, so Element 2 still gets focus negating the focus you previously set.

One of your thread examples offers a solution using timeout which simply gives enough time for elementTwo to receive focus before resetting focus back to ElementOne.

Now without seeing your code its very difficult to offer any concrete suggestion. Look at what the code is doing, and if its moving somewhere else after setting focus. Perhaps like in the other thread you linked to, its still submitting the form, so focus setting is lost when the page reloads.


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web &amp; Tech

 

[JRB-Bldr]

Vacunita - thanks for the reply.

I have seen where SetTimeout() is used in some of those examples and in others that I have found on the web, but -- AND HERE IS WHERE MY NEWBIE CREDENTIALS ARE GLARINGLY APPARENT -- I am having difficulty understanding how to apply it.

If I use an alert() the focus() is being automatically set to the next object rather than allowing the focus() to be set back to the object where the Validation failed.

Question 1 - While I can follow the code and determine visually what that next object is to be, I don't know how to programatically determine it - especially since the object is named the same, but in different <div class>'s.

homeOwnerStatus = bcApp.currentContact.get("HomeOwnerStatus");
insuranceCarrier = bcApp.currentContact.get("HomeCarrier");

// Some code here to test if Carrier selected resulting in a [u]NO Carrier Selected[/u]

alert("You Must Select an Insurance Carrier");
			
if(homeOwnerStatus == "Owner") {
	$(".section property-details-own #select-insurance-carrier").focus();
} else {
	$(".who-currently-insured-with #select-insurance-carrier").focus();
}

// NOTE - in the code above, the focus() after the alert() is NOT going where intended, but instead to the object which [u]follows[/u] the intended object.

Question 2 - Do I set up the SetTimeout() before issuing the alert() so that when the default (next) object is 'focused' it will already be set up to timeout?

Question 3 - That next object is a legitimate object which needs a 'standard' focus() later - when and how do I eliminate the temporary SetTimeout() needed to support the alert() focus()?

Thanks,
JRB-Bldr

 

[vacunita]

The first thing to note, is that jquery functions a little differently to standard JS. Personally I'd do it with straight JS first, before involving jquery. So you know what needs to be done, and then just use the jquery objects and methods to do it.

Question 1 - While I can follow the code and determine visually what that next object is to be, I don't know how to programatically determine it - especially since the object is named the same, but in different <div class>'s.

You don't need to. The timeout will be set up from either before or after the alert message, doesn't really matter, to occur in a pre-set amount of time. All you need to know is the object which you wish to re-focus.

Question 2 - Do I set up the SetTimeout() before issuing the alert() so that when the default (next) object is 'focused' it will already be set up to timeout?

Doesn't matter.

Question 3 - That next object is a legitimate object which needs a 'standard' focus() later - when and how do I eliminate the temporary SetTimeout() needed to support the alert() focus()?

I'm confused here. The setTimeout function only happens once. After its done its done, and won't affect the functioning of later elements. If eventually the element being validated is o.k, and the focus can be left to pass on to the next element, then it will. The forced focusing should only happen when the element does not validate.

In psuedo code:

function toValidate()
{
 if(elementvalidation fails)
 {
   alert(message);
   setTimeOut(element.focus);
 }
}//end of function toValidate

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web &amp; Tech

 

[JRB-Bldr]

The setTimeout function only happens once.
After its done its done, and won't affect the functioning of later elements.

To help clarify my understanding - do you mean that the setTimeout() will affect that specific element only one single time and then automatically revert to the 'normal'
Or will it be in affect every time that same specific element is subsequently accessed?

Thanks,
JRB-Bldr

 

[vacunita]

To help clarify my understanding - do you mean that the setTimeout() will affect that specific element only one single time and then automatically revert to the 'normal'
Or will it be in affect every time that same specific element is subsequently accessed?

That depends entirely on your logic. The setTimeOut merely lets a a pre-set amount of time pass before executing whatever function you pass to it. If you set it to happen each time the element fails validation then that's what it will do. Its just a workaround for the focusing. It will not affect the rest of your logic in any way.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web &amp; Tech

 

[JRB-Bldr]

The reason I need to understand is that the specific element to which I was thinking of using the setTimeout() is a 'regular' element which the user may enter at any time.

In the event of a Validation Fail of the previous element I use the alert() to inform the user.

When I issue the alert() the focus() falls on this next element apparently automatically despite my attempts to set the focus() back on the failing element.

Some of the approaches I have seen to get the focus() back to where I really want it to go involves using the setTimeout on this next element (a millisecond or so) and then it allows the focus() to go back to the failing element.

However once that failing element has been populated correctly, the user will go onto the next element in a legitimate manner where I would not want some short timeout in effect.

Clear as mud??

Thanks,
JRB-Bldr

 

[vacunita]

However once that failing element has been populated correctly, the user will go onto the next element in a legitimate manner where I would not want some short timeout in effect.

Correct. The setTimeOut will only ever execute where you tell it to execute.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web &amp; Tech

 

[JRB-Bldr]

I just discovered a new 'wrinkle' in the challenge.

In IE:
When an onBlur() validation returns a FALSE, the focus() goes back to the failing element.

In Firefox:
The onBlur() validation returning a FALSE, does NOT send the focus() back to the failing element - instead it moves forward to the next element.

I need an answer (using setTimeout() or onBlur() or anything) that will allow me to do field-level validation with return of focus() to the failing element after an alert() has been issued.

And it needs to work in both browsers.

As usual your help/suggestions/advice will be GREATLY appreciated.

Thanks,
JRB-Bldr

 

[JRB-Bldr]

Well it looks as though the solution is going to be to use the setTimeout() function.

Following the alert() with something like:
setTimeout(function(){x.focus();}, 1);

Now I just have to figure out how to modify the 'generic' code above into the specifics that match my elements
$(".section property-details-own #select-insurance-carrier").focus();

Again, any help/advice/suggestions would be GREATLY appreciated.

Thanks,
JRB-Bldr

 

[JRB-Bldr]

Just in case anyone is interested...

The solution I ended up with to get the focus() back to the element which was failing the Validation ( select-insurance-carrier ) on FocusOut....

homeOwnerStatus = bcApp.currentContact.get("HomeOwnerStatus");
insuranceCarrier = bcApp.currentContact.get("HomeCarrier");

// Some code here to test if Carrier selected resulting in a NO Carrier Selected

if (homeOwnerStatus == "Owner") {
   var txtDiv = ".section.property-details-own ";
} else {
   var txtDiv = ".section.property-details-rent ";
}

alert("You Must Select an Insurance Carrier");
setTimeout(function() {$(txtDiv + "#select-insurance-carrier").focus();}, 0);

This was working as needed in Firefox.

When I tried to run in IE, the over-all script did not run.
Perhaps there is some incompatible code elsewhere that is causing the problem
But getting it running in FF is what I was after at this point in time.

Thanks