Example Code for Tabbing Through Jeditable Fields in a jQuery UI Tab

Example Code for Tabbing Through Jeditable Fields in a jQuery UI Tab

This is a specific case use I couldn't find any examples for so I pulled together a few similar ideas and tweaked them for my needs. Assuming you have a jQuery UI tab containing multiple divs binded to Jeditable -  all with a class of "jedit" - this code will allow the user to tab forward and backward through the fields, and also wrap around to the first/last field, both forward and backward, constrained to the current tab.

Even if you're not using UI tabs, you might find this useful as it does not assume the form element is "input", and it doesn't require you to set Jeditable's onblur option to "submit".

  1. $('div.jedit').on('keydown', function (e) {
  2.   if (e.keyCode==9) {
  3.     e.preventDefault();
  4.     $(this).find('form').submit();
  5.     var $jedits = $(this).parents('.ui-tabs-panel').find('div.jedit');
  6.     var i = $jedits.index($(this));
  7.    var n = 0;

  8.     if (i < ($jedits.length - 1) && !e.shiftKey) {
  9.       n = i + 1;
  10.     }
  11.     else if (e.shiftKey) {
  12.       n = i - 1;
  13.     }
  14.     $jedits.get(n).click();
  15.   }
  16. });