RoR Ajax and jQuery Post Form from Checkbox

Question

New to RoR, please forgive any ignorance.

Running on 4.0.0.rc1, and I'm using Devise for LDAP authentication

I'm attempting to make a "tasklist" application and having a bit of trouble in my index view with AJAX and jQuery calls. I'm attempting to have a foreach loop to iterate through elements in the tasklist, each listed as a separate form. The tasklist will be supplied automatically based on the current date. I have a text_field element in place of the automatically generated task list for development purposes.

When a user clicks on the checkbox, I would like to supply a POST SUBMIT for the form, while redirecting back to the initial index. Upon a SUBMIT, also have the userID for the user that is logged in as well as the date supplied along with the POST. ie:

[TaskName] [UserID (Blank)] [Date (Blank)] Completed? [Checkbox]

• Then upon user click of the checkbox:

[TaskName] [UserID] [Date] Completed? [Checkbox (Disabled)]

I currently have the following code that I have been hacking around with for the past couple days, and still struggling to make work.

app/views/weeks/index.html.erb:

<table>
  <thead>    
    <tr>
      <th>Task</th>
      <th>Completed by</th>
      <th>Completed on</th>
      <th>Completed</th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <%= form_for(Week.new, remote: true) do |f| %>
        <td><%= f.text_field :task %></td>
        <td><%= f.hidden_field :completed_by, :value => current_user.login %></td>
        <td><%= f.hidden_field :completed_on, :value => DateTime.current().in_time_zone('EST').to_formatted_s(:short) %></td>
        <td><%= f.check_box :completed, :onchange => '$(this.form).submit();' %></td>
      <% end %>
    </tr>
  </tbody>
</table>

app/views/assets/javascripts/weeks.js.coffee:

$(document).ready ->
$("#new_week").on("ajax:success", (e,data,status,xhr) ->
        $("#new_week").append xhr.responseText
    ).on "ajax:error", (e, xhr, status, error) ->
        $("#new_week").append "<p>ERROR</p>"

app/controllers/weeks_controller.rb:

class WeeksController < ApplicationController
  before_action :set_week, only: [:show, :edit, :update, :destroy]

  # POST /weeks
  # POST /weeks.json
  def create
    @week = Week.new(week_params)

    respond_to do |format|
      if @week.save
        format.html { redirect_to @week, notice: 'Week was successfully created.' }
        format.json { render action: 'show', status: :created, location: @week }
      else
        format.html { render action: 'new' }
        format.json { render json: @week.errors, status: :unprocessable_entity }
      end
    end
  end

Answer 1

Hm, one thing I notice is that the weeks#create action in your example doesn't handle a js request.

How I do it in my app for a simple remote form and js template.

# POST /weeks
# POST /weeks.json
def create
  @week = Week.new(week_params)

  respond_to do |format|
    if @week.save
      format.js
    else
      format.js
    end
  end
end

and having js templates like your week.js.coffee but named after the requested action and as erb-templates. So it would be create.js.erb/new.js.erb in my case.

But the more I think about it. You have to first clearify what exactly you do need. Because everything can be handled in backend or frontend. There are several possibilities.