Using haml or erb code in ModalBox causes afterLoad callback to not get called

Question

I open a ModalBox with:

=link_to_function "Add", "Modalbox.show('appt', {title: this.title, width: 600, height: 400, afterLoad: function() { alert('Content loaded') } });"

This loads a haml file. When the haml file contains certain code, the callback never gets triggered. The same actually happens with .erb files as well.

For example, the callback gets triggered when the file contains:

<% form_for(:appointment) do |f| %>
  <%= f.error_messages %>
<% end %>

but not when it contains:

<% form_for(:appointment) do |f| %>
  <%= f.error_messages %>
  <%= f.submit 'Update' %>
<% end %>

Any clues?

EDIT:

I narrowed it down and it breaks on this code in modal.js:

var firstEl = this.focusableElements.find(function findFirst(el){
  i++;
  return el.tabIndex == 1;
}) || this.focusableElements.first();

Haven't really looked into why, but since it's just trying to set focus on the first found element I'm just commenting out the line 'this._setFocus();' in '_putContent'.

I'm still curious why that breaks in the case mentioned above in case anyone knows.

Answer 1

Can't you just set up a tabIndex attribute to "1" for the first filed at the modal?

<% form_for(:appointment) do |f| %>
  <%= f.error_messages %>
  <%= f.submit 'Update', :tabindex => 1 %>
<% end %>