Ruby on Rails - 重新加载部分点击事件时出错

Question

我正在尝试重新加载表单中使用的部分内容，以更新视图中“停止时间”字段中显示的时间。

当我尝试在点击事件上重新加载部分内容时出现错误。

我在 SO 网站上查看了类似的问题，例如：Rails refresh partial，当我尝试应用其他问题的答案时，我无法解决错误。

感谢任何有助于解决此错误的 cmets 或建议。

提前感谢您的帮助。

我的应用环境是：

• Rails 版本 4.2.7.1
• Ruby 版本 2.3.4-p301 (x86_64-linux)
• RubyGems 2.6.11 版
• JavaScript 运行时 Node.js (V8)

我已将控制器中的“update_stoptime”操作定义为：

class UsercatsController < ApplicationController  
  #######################################
  # define action to update stop time
  #######################################
  def update_stoptime

    @ustoptime = Time.current.strftime("%I:%M %p")

    p 'print @ustoptime time value (Time.current) below for update_stoptime action in Usercats controller'
    p @ustoptime

    respond_to do |format|
        format.js 
    end

  end

# GET /usercats/new
  def new

     p 'current user ID for NEW action is:'
     p current_user.id

     @usercat = current_user.usercats.build

     @ustoptime = Time.current.strftime("%I:%M %p")

     p 'print @ustoptime time value below for new action in controller(Time.current)'
     p @ustoptime

  end

end

部分保存在“../views/stoptimes”文件夹下：

# _stoptime.html.erb

<div id='update_stoptime'>
   <%= f.input :stoptime, required: true, input_html: {value: @ustoptime}, :label => "Stop Time:", :ampm => true %>
</div>

部分是从保存在 ../views/usercats 文件夹下的文件呈现的：

# _form.html.erb

<%= simple_form_for(@usercat) do |f| %>
    <%= f.error_notification %>

  <div class="form-inputs">
    <%= render 'stoptimes/stoptime', f: f %>
  </div>


  <div class="form-actions">
    <%= f.button :submit %>
  </div>
<% end %>

在 ../views/usercats 文件夹下，我使用以下 JS Coffee 文件重新加载点击事件的部分内容：

# app/views/usercats/update_stoptime.js.coffee

$("#update_stoptime").load("<%= j render partial: 'stoptimes/stoptime',  locals: { f: f } %>");

我用下面的行更新了 routes.rb 文件：

get 'usercats/update_stoptime', as: 'update_stoptime'

在“../app/assets/javascripts/”文件夹下，我创建了一个带有 AJAX 调用的 JS Coffee 文件：

# stoptime.js.coffee

$ ->
  $(document).on 'click', '#update_stoptime', (evt) ->
      $.ajax 'update_stoptime',
      type: 'GET'
     dataType: 'script'
     error: (jqXHR, textStatus, errorThrown) ->
     console.log("AJAX Error: #{textStatus}")
     success: (data, textStatus, jqXHR) ->     
     console.log("script loaded OK!")

我在下面列出了错误：

Started GET "/usercats/update_stoptime?_=1539021470900" for 104.194.218.93 at 2018-10-08 17:58:58 +0000

Processing by UsercatsController#update_stoptime as JS
  Parameters: {"_"=>"1539021470900"}
  User Load (0.2ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = ?  ORDER BY "users"."id" ASC LIMIT 1  [["id", 1]]

"print @ustoptime time value (Time.current) below for update_stoptime action in controller"
"01:58 PM"
  Rendered usercats/update_stoptime.js.coffee (45.7ms)
Completed 500 Internal Server Error in 53ms (ActiveRecord: 0.2ms)

ActionView::Template::Error (undefined local variable or method `f' for #<#<Class:0x007f736a255078>:0x007f7369f05698>):
  1: # app/views/usercats/update_stoptime.js.coffee
  2: $("#update_stoptime").load("<%= j render partial: 'stoptimes/stoptime',  locals: { f: f } %>");

app/views/usercats/update_stoptime.js.coffee:2:in '_app_views_usercats_update_stoptime_js_coffee___2918126501527502339_70066841111240'
app/controllers/usercats_controller.rb:32:in 'update_stoptime'

########################################### ##################

更新，我在下面添加了一些信息，用于解决在点击事件中重新加载部分时出现的错误。

########################################### ##################

根据@IlyaKonyukhov 的回答，我决定将停止时间存储为字符值。

首先我生成了下面的迁移，为我的模型添加一个字符停止时间变量。

rails g migration add_cstoptime_to_usercat cstoptime:string

接下来我更新了“../app/assets/javascripts/”文件夹下 JS Coffee 文件中的 AJAX 调用，以将实例变量从控制器传递到视图。

#stoptime.js.coffee
$ ->
   $(document).on 'click', '#update_stoptime', (evt) ->
     $.ajax 'update_stoptime',
     type: 'GET'
     dataType: 'script'
     data: {
             cstoptime: @ustoptime
           } 
    error: (jqXHR, textStatus, errorThrown) ->
      console.log("AJAX Error: #{textStatus}")
    success: (data, textStatus, jqXHR) ->
      console.log("script loaded OK!")

接下来我更新了控制器中的 'new' 和 'update_stoptime' 动作以输出停止时间的字符串值。

class UsercatsController < ApplicationController  
  #######################################
  # define action to update stop time
  #######################################
  def update_stoptime

    @ustoptime = Time.current.strftime("%I:%M %p").to_s

    p 'print @ustoptime time value (Time.current) below for update_stoptime action in Usercats controller'
    p @ustoptime

    respond_to do |format|
        format.js 
    end

  end

# GET /usercats/new
  def new

     p 'current user ID for NEW action is:'
     p current_user.id

     @usercat = current_user.usercats.build

     @ustoptime = Time.current.strftime("%I:%M %p").to_s

     p 'print @ustoptime time value below for new action in controller(Time.current)'
     p @ustoptime

  end

end

接下来我更新了保存在“../views/stoptimes”文件夹下的部分：

#app/views/stoptimes/_stoptime.html.erb
<input value="<%= @ustoptime %></input>

接下来我更新了 JS Coffee 文件以重新加载点击事件的停止时间值：

# app/views/usercats/update_stoptime.js.coffee
$("#update_stoptime").val("<%= @ustoptime %>");

接下来我更新了保存在 ../views/usercats 文件夹下的表单：

# _form.html.erb

<%= simple_form_for(@usercat) do |f| %>
    <%= f.error_notification %>

 <%= f.input :cstoptime, :label => "Record stop time:",  
           input_html: {id: 'update_stoptime', :style => "width:110px", value:  @ustoptime, class: "form-control"} %>


  <div class="form-actions">
    <%= f.button :submit %>
  </div>
<% end %>

在我进行上面列出的修订/更新后，停止时间的值开始在点击事件上自动更新，没有任何错误。

感谢@IlyaKonyukhov 的cmets 和建议。

Answer 1

嗯，错误信息undefined local variable or method `f' 清楚地表明了问题所在。

为了响应“usercats/update_stoptime”的 AJAX 请求，服务器会处理此模板：

# app/views/usercats/update_stoptime.js.coffee
$("#update_stoptime").load("<%= j render partial: 'stoptimes/stoptime',  locals: { f: f } %>");

ERB 表达式中的变量f 是本地的，它没有在该模板中定义。这就是它导致错误的原因。

将此场景倒回到为常规 GET 请求定义此变量的位置，将我们带到_form.html.erb 模板，在该模板中，它被设置为@usercat 形式的块参数。对于您的 AJAX 调用，@usercat 也未定义。

我建议重写_stoptime.html.erb 模板并将f.input 替换为常规text_field_tag（或time_field_tag？）。在您的情况下，值是通过 @ustoptime 变量单独定义的，该变量在常规和 AJAX 调用的控制器方法中设置。所以f 变量给你的部分带来的唯一东西是input 标记的名称。您可以使用对当前代码库的常规 GET 请求来监视它。

Answer 2

尝试将其更改为：

$("#update_stoptime").html("");