Set Focus after data entry

Set Focus after data entry

  

Hi,

What I'd like to do is this:

I have a row of input controls (beneath a TableRecords widget). My user will enter data, tabbing from input box to input box, and then can hit enter (based on there being a default link widget) to trigger that data being added to the aggregate for the TableRecord, which then does an Ajax Refresh to update the grid and clear the input controls ready for the next entry (speed of data entry is the primary concern here - we are trying to avoid the user taking their hands off the keyboard).

The problem I seem to be having is setting focus back to the first input control after the Ajax refresh - I've looked at the other suggestions in the forums, but don't seem to be able to make them work - I'm concerned that I might be putting the JavaScript in in the wrong place, or in the wrong format.

Is what I want possible? If so, does anyone have a quick step-by-step, or know of one they could point me at?

Cheers!

Hi Steve,

What are you using? RichWidget's Input_SetFocus?

" (speed of data entry is the primary concern here - we are trying to avoid the user taking their hands off the keyboard)."

It seems that your client needs robots, not users... :D

I'm assuming you are doing this WEB?

In any case, I think trying to use the  RichWidget's Input_SetFocus will not work, because your inputs are inside a list and, as each input will have a specific ID based on which element it is inside the list, it will not be possible to define which one you want to use... (Maybe I'm wrong here).

But there is a very simple approach that will work.

1. Give the FIRST input in the list a class. You can do this using a condition in the Extended Properties:

2. In the Submit action, add a RunJavaScript action (From HTTPRequestHandler), with a simple jQuery like this:

This'll be probably enough to put the cursor again in the first input of your dynamic list.

Hope this helps.

Cheers,
Eduardo Jauch

Thanks Eduardo,

I can refactor my WebForm to work this way, I think!

Having played with this a little, it appears that this will work with a Submit method but not an Ajax Submit? My original plan used an Ajax Submit and refresh on the grid and input controls rather than a full Submit of the form - does the way that the JavaScript code is injected into the page make that kind of approach impossible?


Cheers,

Steve

Hello Steve,

At least in my tests, it works with Submit or Ajax Submit. No difference. 

I'm not sure if the JavaScript will always be executed AFTER the UI refresh, but it seems this way, and in this case it would work in both situations, unless you have something that is happening asynchronously that is being received AFTER the JavaScript is executed and it is loosing the focus.

Can you provide a minimum working module that shows this behavior where with Ajax Submit the focus is not working? 

Cheers,
Eduardo Jauch

Many thanks for this, Eduardo!

I've attached a module that shows what I'm trying to achieve - the focus after the input remains on the last input widget, rather than moving back to the first.

Cheers,

Steve

Solution

Hi Steve,

Now that I can see your code, I see that I didn't understand the problem at first. You don't have multiple "Lines" with the inputs there. You just have a single line with inputs and you create new lines on the table records and want to keep the focus in the first input.

Than, you don't need to add a class, just change the JavaScript code to this:

"$(""#" + inpPartRef.Id + """).focus()"

But using the RichWidget Input_SetFocus also works.
I set the Input_SetFocus in your example to you to see.

Cheers,
Eduardo Jauch

Solution