0

I'm given a task to create a series of span text elements, that'd allow me to provide tabbing operations as I'm traversing through the html document.

In my solution, I have a few ajax updates, and there are certain html elements that can be editable and other that are not. However, I removed those kinds of details in the example I am providing.

So the operation mode is that when I click on a span element, it changes to an input box. What I want is when I hit the TAB key, it should go to the next element span with the class "test", switching the next element into a input box and changing the old input box to a span.

However, I also want the operation that whenever I'm on any input box, that it will automatically switch me to a span, without any traversing.

The problem I am facing is that I can either get one or the other to work, but not both.

  1. When I set the blurring functionality to work. I can swap the span element to be an input, and when I focus out of it, it returns to normal, but tabbing doesn't work.
  2. When I get the tabbing functionality to work, I can tab through a series of span elements, but when I try to focus out of an input by clicking on the body document, it doesn't change the input box back to a span.

The underlying problem is because both operations triggers the focusout event. But when I tab, it does the keydown event first, then it triggers the focusout event.

I'm attaching a jsfiddle here: http://jsfiddle.net/QcGag/1/

Notice in the code, I used a canTab flag. If you leave the code the way it is, it can tab through correctly. So click on Test 1 and keep hitting the tab key. It will skip over "Test 3". Now, remove // before the cellElem.canTab = false; then the blur function will work but the tabbing is disabled. I need to get both to work.

I'd accept an advice on design or coding structure.

Here's the latest update to the code: http://jsfiddle.net/QcGag/3/

This actually works in IE 7-9, but not in Google Chrome; the error comes out as:

"Uncaught Error: NOT_FOUND_ERR: DOM Exception 8"

What I did was set the next element to "" and checked for the next element's length (for existence) in the if statement of canTraverse(). Note: I changed the name from save() in the first code sample to canTraverse().

posted in jQuery forum: http://bugs.jquery.com/ticket/12505

Posted in Google Chromium: http://code.google.com/p/chromium/issues/detail?id=147759

1 Answer 1

0

Okay I figured out a solution:

The key in the design was to separate the focusout from the logic on the keydown then handle it by figuring out how the span was first converted to the input box (tabbed into it, or clicked on).

Then I kept track of where the dynamically created textbox would be, via latestCellInfo. This information is useful so that I can use that information on any future event and to organize the code better.

exit_edit flag: this signifies how the input box was entered into: either by tabbing into it, or by clicking into it. So when I tab out of a previous textbox, it is set to false, but when an input gets focused, it is set to true again. When you focus out, it will then make a check to see whether or not we can continue tabbing.

will_tab flag: this signifies on whether I should keep on tabbing regardless of whether or not I changed the value. This is checked in the "canTraverse" function

http://jsfiddle.net/QcGag/7/

I'm still keeping the issue in the google forum opened since the exception should not have been thrown in my initial design.

Note: changing the text in the input and exiting will not work in the example. My question on this forum was specifically for the operation of traversing, not for data handling. It automatically worked on my side since I'm returning the data via ajax and it's replacing the component before I replaceWith old_elem. But if anyone else needs to traverse through like the way I did, this'd be a good start.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.