ajaxing.md

Form:

<div class="form-group">
  <%= label_tag :content, "Comment", class: "control-label col-md-4 required-field" %>
  <%= text_area_tag :content, "", id: "content", class: "input-md textinput textInput form-control" %>
  <input type="hidden" id="user_id" value=<%= "#{current_user.id}" %>>
  <input type="hidden" id="upload_id" value=<%= "#{@upload.id}" %>>
</div>
<div class="form-group">
  <%= submit_tag "Submit", id: "comment", class: "btn btn-primary"%>
</div>

Javscript:

$(document).on('turbolinks:load', function(){
  $('#comment').on('click', function(){

    var fileID = document.getElementById('upload_id').value
    var userID = document.getElementById('user_id').value
    var content = document.getElementById('content').value

    $.ajax({
       type:'POST',
       url: '/uploads/comments',
       data: {upload_id: fileID, user_id: userID, content: content}
    });
  });
});

Controller:

def create
  Comment.create(comment_params)
  @comments = Upload.find(params[:upload_id]).comments

  respond_to do |format|
    format.js
  end
end

create.js.erb :

$("#comments").html("<%= escape_javascript(render partial: 'shared/comments', locals: { comments: @comments }) %>");

Renders this partial:

<div id="comments">
  <%= render partial: 'shared/comments', locals: { comments: @upload.comments } %>
</div>