简体   繁体   English

RoR Ajax和jQuery Post Checkbox

[英]RoR Ajax and jQuery Post Form from Checkbox

New to RoR, please forgive any ignorance. RoR的新手,请原谅。

Running on 4.0.0.rc1, and I'm using Devise for LDAP authentication 在4.0.0.rc1上运行,我将Devise用于LDAP身份验证

I'm attempting to make a "tasklist" application and having a bit of trouble in my index view with AJAX and jQuery calls. 我正在尝试制作“任务列表”应用程序,并且在使用AJAX和jQuery调用的索引视图中遇到了一些麻烦。 I'm attempting to have a foreach loop to iterate through elements in the tasklist, each listed as a separate form. 我试图让一个foreach循环遍历任务列表中的元素,每个元素都以单独的形式列出。 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. 为了开发目的,我有一个text_field元素代替了自动生成的任务列表。

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. 当用户单击复选框时,我想为表单提供POST SUBMIT,同时重定向回初始索引。 Upon a SUBMIT, also have the userID for the user that is logged in as well as the date supplied along with the POST. 提交后,还应具有已登录用户的用户ID以及随POST一起提供的日期。 ie: 即:

[TaskName] [UserID (Blank)] [Date (Blank)] Completed? [TaskName] [UserID(空白)] [Date(空白)]完成了吗? [Checkbox] [复选框]

  • Then upon user click of the checkbox: 然后在用户单击复选框时:

[TaskName] [UserID] [Date] Completed? [TaskName] [UserID] [Date]完成了吗? [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: 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: 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: 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

Hm, one thing I notice is that the weeks#create action in your example doesn't handle a js request. 嗯,我注意到的一件事是您示例中的weeks#create操作无法处理js请求。

How I do it in my app for a simple remote form and js template. 如何在我的应用程序中实现简单的远程表单和js模板。

# 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. 并具有js模板(如week.js.coffee),但以请求的操作和erb模板命名。 So it would be create.js.erb/new.js.erb in my case. 因此,在我的情况下为create.js.erb / new.js.erb。

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. 有几种可能性。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM