Это то, что убило мой проект за несколько дней.
У меня есть стандартная таблица значений;со скелетом примерно так:
<table><tbody><tr><td>Stuff!</td></tr></tbody></table>
Я пытаюсь загрузить встроенную форму Rails 3 в tbody с помощью jQuery, чтобы позволить пользователю добавлять новые значения в таблицу.Это делается с помощью кнопки, которая получает новое действие моего контроллера, который, в свою очередь, вызывает new.js.erb, который просто добавляет часть визуализированной формы в таблицу ($("table tbody").prepend('<%= escape_javascript(render 'form') %>');).
Частичная формасамо по себе выглядит примерно так:
<tr>
<td>
<%= form_for @model, :remote => true do |f| %>
</td>
<td>
<%= f.text_field :column %>
</td>
<td>
<%= f.submit "Add" %>
<% end %>
</td>
</tr>
Вот тут и начинается путаница: в браузерах Webkit и IE это работает как положено!Получающийся HTML-код выглядит примерно так:
<table>
<tbody>
<tr>
<td>
<form>
</form>
</td>
<td>
<input>
</td>
<td>
<input type="submit">
<td>
</tr>
<tr>The list of values</tr>
</tbody>
</table>
Конечно, тот факт, что форма начинается и заканчивается в одной и той же ячейке, перед тем как начнутся вводы, должен поднять красный флаг, указывающий, что что-то идет не так.Тем не менее, форма по-прежнему отправляется и работает совершенно иначе.
В Firefox это не так.Форма отображает что-то более похожее на это (показано только то, что находится внутри добавленной строки, поскольку все остальное одинаково):
<td>
<form>
</form>
<td>
<input>
</td>
<td>
<input type="submit">
<td>
</td>
Разница в том, что в отличие от браузеров Webkit / IE, Firefox выбрасывает все вячейка тега form.Также форма не работает вообще - она даже не отправляется.Никакие запросы даже не отправляются.
Теперь, из некоторых моих исследований я узнал, что, возможно, я делаю здесь огромную ошибку, и разница заключается в том, что браузеры пытаются рендерить то, что я оставилпо-разному.Поэкспериментировав с этим, я понял, что это не имеет ничего общего с тем, как формы Rails взаимодействуют с таблицами - если вы просто визуализируете частичное внутри таблицы, HTML-код идентичен между браузерами (тег формы по-прежнему закрывается перед другими входными данныминачать, однако, это может означать, что я помещаю <% end%> в неправильное место!).Что-то происходит неправильно, когда я добавляю рендеринг частичного с помощью jQuery: возможно, частичный рендеринг неправильный из-за отсутствия вложенных тегов таблицы, а затем вставляется в таблицу, вызывая проблемы.
Действительно, я был озадачен,Я искал это далеко и широко, и, хотя есть некоторые вопросы, связанные с тангенциальной точки зрения, ни один из них, похоже, не затронул мою проблему.
Я ожидаю, что совершил очень простую ошибку - но что это?
Любая помощь будет с благодарностью!Я надеюсь, что объяснил проблему как можно яснее.