Rails 4 Turbolinks make form submit multiple times

Question

I use some code working nicely on Rails 3 but not on Rails 4, I guess it is caused by Turbolinks but I don't know much about it, can't dig more deep to solve my problem, here is the code:

view:

a/v/m/_new_comment.slim                                                                                                                             
.new-comment                                                                                                                                         
- if current_user
  = render "editor_toolbar"
  = form_for(Comment.new, :remote => true, :url => mission_comments_path(@mission)) do |f|
  = f.text_area :content, :class => "span10",
    :rows => "4", :tabindex => "1"
  #preview.hidden
    = "Loading..." 
  = f.submit t("missions.submit_comment"),
    "data-disable-with" => t("missions.submitting"),
    :class => "btn btn-primary", :tabindex => "2"
- else
  = render "need_login_to_comment"

controller:

def create
  @mission = Mission.find(params[:mission_id])
  @comment = @mission.comments.build(comment_params)
  @comment.user = current_user

  if @comment.save
  @mission.events.create(user: current_user, action: "comment")
  render layout: false
end

and js:

<% if @comment.errors.any? %>                                                                                                                        
  $(".new-comment textarea").focus();
<% else %>
  $(".comments").append("<%= j (render @comment, :index => @mission.comments.count-1) %>");
  $(".new-comment #preview").addClass("hidden").html('');
  $(".new-comment textarea").css("display", "block").val('');
  $(".editor-toolbar .preview").removeClass("active");
  $(".editor-toolbar .edit").addClass("active");
<% end %>

I have two question about this code, first: the controller code like this isn't work the js code is transfer to client but not run, I have to add render layout: false at bottom of that action, no need this on Rails 3

second question: when I first visit this page, reload the page, comment function works, but if I click a link from other pages to jump to this page, I submit this form will cause ajax request call multiple times, multiple comments will be created

thanks in advs

Answer 1

Solved this by moving = javascript_include_tag "application", "data-turbolinks-track" => true from body to head, thanks all your help

Answer 2

You can leave it in the body, you just need to add to your script tag:

"data-turbolinks-eval" => false

In general, with turbolinks, it's best to make sure your code is "idempotent", so if it runs more than once, bindings won't get setup more than once.

The best way to do this is instead of $('blah').bind(), call unbind first:

 $('blah').unbind('click').bind('click', function() {

Answer 3

One possible reason you could be running into issues is if you are including the js on every page. It's my understanding it will append the js to the head and if you have included it on multiple pages you could find yourself binding the ajax multiple times. That being said it's not apparent how you are including the js from what I saw. You could possibly solve this by only including the js file in your application.js