link_to remote:true 重複submit

為了增加rails app的效能,通常會把application.html.erb裡面的 javascript_include_tag 從head區移出來放到body的最下面。讓頁面載完再去載入js以提升網站效能,像是下面這樣。

app/views/layout/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>Suggestotron</title>
    <%= csrf_meta_tags %>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': true %>
  </body>
</html>

但但但但但但但這樣的做法會因為 turbolinks 而產生出一個大問題,那個大問題就是當你的連結或按鈕有做 remote:true的時候,你只要refresh畫面或是跳到別的頁面再跳回來,你這顆按鈕就好像會是被重複bind事件一樣,會一直重複的送submit,你refresh幾次他就會送幾次。

如果自己要實驗的話很簡單就隨便弄一個link_to按鈕出來做remote:true ,看要做post還是delete都行,在action裡面下binding.pry就可以看到會重複進到controller很多次,不下binding.pry的話可以直接試弄一個這個試試,按下確認會發現一直重複跳alert。

<%= link_to 'Delete', topic, method: :delete , remote:true , data: { confirm: 'Are you sure?' } %>

關於這個問題的解法就是這樣

app/views/layout/application.html.erb
<%#= javascript_include_tag 'application', 'data-turbolinks-eval': 'false' %>

把後面的 'data-turbolinks-track': true 換成 'data-turbolinks-eval': 'false' 就可以解決這個問題。

參考資料:
Turbolinksと仲良くするために注意すること
Rails 4のturbolinksについて最低でも知っておきたい事
Turbolinks 向导
turbolinks-evaluating-script-tags
data-confirm firing more than once
Turbolinksをオフしないためにやった事

comments powered by Disqus