tabIndex Attribute and AJAX

Question

I've seen some posts about tabIndex issues, but I was unable to find one like the scenario below that I need to fix.

So here's the lowdown on the project. It's an ASP.NET 2.0 web app using AJAX 1.0 Extensions and jQuery. I'm looking for any ideas from any programming language to handle a scenario like this.

So first off, I know how to set the tabIndex, whether it be hard-coded or auto-generated in a user control. The problem I have is, what if you have a composite control using AJAX, e.g. a grid control and you have your tabIndex properties all set for all form entry elements including the visible rows in your AJAX grid control. What, for example, happens to tab ordering if I add a new row to the grid via AJAX?

Below is the tab order, not the order of the elements in HTML:

Initial Page Load

Input 1, tab index 1
Input 2, tab index 2
Grid 1, tab index 3
|-- Row 1 (loaded initially)
     |-- Cell 1, tab index 4
     |-- Cell 2, tab index 5
Input 3, tab index 6
etc.

now via AJAX, I add a new row to the grid

Input 1, tab index 1
Input 2, tab index 2
Grid 1, tab index 3
|-- Row 1 (loaded initially)
     |-- Cell 1, tab index 4
     |-- Cell 2, tab index 5
|-- Row 2 (loaded via AJAX)
     |-- Cell 1, tab index ?
     |-- Cell 2, tab index ?
Input 3, tab index 6
etc.

Now from what I understand the tabIndex attribute's value by default is -1, so that all elements without the attribute get tabbed in the order they appear in the document object model tree after any elements if any that havea tabIndex attribute value > 0. So my Row 2 cells would get -1 as their tabIndex value. So tabbing through my form would be like this:

Input 1, tab index 1
Input 2, tab index 2
Grid 1, tab index 3
|-- Row 1 (loaded initially)
     |-- Cell 1, tab index 4
     |-- Cell 2, tab index 5
Input 3, tab index 6

|-- Row 2 (loaded via AJAX)
     |-- Cell 1, tab index 7 (7 because of default -1 value behavior)
     |-- Cell 2, tab index 8 (8 because of default -1 value behavior)

I looked at some jQuery plugins, but none handle what I want to do (or at least I don't think they do). I checked out the jQuery Tabindex Plugin and jQuery Field Plug-in (v0.9.2).

My ideas:

-Looping through form elements client-side to reset all tabIndex values. This works if you want the order of the elements as they appear in the form, but this is probably slow and will most likely cause the page to hiccup on load. As well, if you want the order as they appear in the form, why even use tabIndex at all? Elements without it will be tabIndex=-1 and will tab in the order they appear in HTML.

-For composite controls designate reserved tabIndex range so when I hit my grid with it's row 1 cell one tabIndex being 4, I say the next control after the grid will be for example, tabIndex = 500, so that I can reserve the other tabIndex values for when I add new rows via AJAX.

-Your idea goes here.

Answer 1

Though this isn't the answer to your question, I thought this is worth mentioning. -1 is not the default value for tabindex as far as I'm aware, setting tabIndex to -1 will mean that you cannot tab to that element in almost all modern browsers (IE included). This could be very confusing if you assumed this in any testing scenario.