22
16

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

turbolinks 入れたら f.submit が効かなくなった件

Posted at

概要

本来関係ないはずなんだけど、元々のviewの書き方によってハマる例です。
今回は、<table>の中の<tr>の外に、<form>を書いてたのがいけなかったです。

現象

諸事情により、今まで tubolinks 使ってなかった Railsプロジェクトに turbolinksを導入。

application.js
//= require jquery
//= require jquery_ujs
//= require jquery.turbolinks // <-追加
//= require select2           // <-追加
//= require turbolinks        // <-追加
//= require_tree .

ajaxで動いてるところはサクッと動いたのに、なぜか、f.submit のボタンが動かなくなる。
ボタン押しても、リクエストどころか、clickイベントも発火してない模様。
そして、同じページをリロードすると改善する(普通にボタンが動作する)。

原因

関係あるのは link_to だけなハズなのに??? と理不尽に感じつつもいろいろ試し。
↓こちらで、invalid HTML の例が出ていたので気づけました。

app/views/some_models/_form.html.erb
<table>
<%= form_for(@some_models) do |f| %>
(中略)
<% end %>
</table>

こういう書き方だと、こんな風にレンダーされてました。

<table class="ta1">
  <form accept-charset="UTF-8" action="/some_models/xxxxxxxxxx" class="edit_some_model" id="edit_some_model_xxxxxxxxxx" method="post"></form>
  <tbody>
  (中略)
  </tbody>
</table>

<tbody> の外で、<form> が閉じちゃってますので、<tbody><tr><td> の中に書いた <input type="submit"> は効かなったというワケです。

解決

<table> の外に <form> をもってくることで、解決しました。

<%= form_for(@titles) do |f| %>
<table>
(中略)
</table>
<% end %>
22
16
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
22
16

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?