Best_in_place tab trough

best-in-place, ruby-on-rails

Solution

I think you can hack around a little bit using `tabindex` HTML attribute and `focus` event like this:

   <td><%= best_in_place student, :oral, :html_attrs => {:tabindex => 10} %></td>
   <td><%= best_in_place student, :writing, :html_attrs => {:tabindex => 11} %></td>
   <td><%= best_in_place student, :participation, :html_attrs => {:tabindex => 12} %></td>
   <td><%= best_in_place student, :grammar, :html_attrs => {:tabindex => 13} %></td>
   <td><%= best_in_place student, :presence, type: :select, collection: [["Present", "Present"], ["Absent", "Absent"], ["", "-"]], :html_attrs => {:tabindex => 14} %></td>

and this JS

$(function() {
  $('span.best_in_place[data-html-attrs]').each(function() {
    var attrs, el;
    el = $(this);
    attrs = el.data('html-attrs');
    if (attrs && attrs['tabindex']) {
      el.attr('tabindex', attrs['tabindex']);
    }
  }).focus(function() {
    var el;
    el = $(this);
    el.click();
  });
});

That last line of the JS code is searching for the element type of BIP form and assigns the `tabindex` so the order of tabbing is maintained.

UPDATE: The CoffeeScript version of the above JS

$ ->
  $('span.best_in_place[data-html-attrs]').each ->
    el = $(this)
    attrs = el.data('html-attrs')
    el.attr('tabindex', attrs['tabindex']) if attrs and attrs['tabindex']
  .focus ->
    el = $(this)
    el.click()

Problem

I'm using best_in_place gem so I can edit multiple students in my index view. The problem though, is that the usuability is bad. I have to click, type the info, enter/click and click again to edit another information. Is that a way that I can press Tab to go trough the fields? Here is the code of the Index: ``` <% @students.each do |student| %> <tr> <td><%= link_to .name, edit_student_path(student) %></td> <td><%= best_in_place student, :oral %></td> <td><%= best_in_place student, :writing %></td> <td><%= best_in_place student, :participation %></td> <td><%= best_in_place student, :grammar %></td> <td><%= best_in_place student, :presence, type: :select, collection: [["Present", "Present"], ["Absent", "Absent"], ["", "-"]] %></td> </tr> <% end %> ``` I found this: https://github.com/bernat/best_in_place/tree/master/lib/best_in_place Ok. This is what I get now, But still's not working :/ Any Ideas? index: ``` <td><%= best_in_place allan, :oral, :html_attrs => {:tabindex => 10} %></td> <td><%= best_in_place allan, :writing, :html_attrs => {:tabindex => 11} %></td> ``` Users.js.coffee ``` jQuery -> $('.best_in_place').best_in_place() $ -> $('span.best_in_place').focus -> el = $(this) el.click() el.find(el.data('type')).attr('tabindex', el.attr('tabindex')) ```

Original source