Rails 5 ReferenceError: function is not defined

Rails 5 ReferenceError: function is not defined

我正在尝试(现在整个上午:-S)在 onChange 上加载一个 js 函数以填写表单中的某些字段。 我已经为此搜索了解决方案,这让我添加了 jquery-turbolinks,甚至尝试删除 turbolinks。这没有用。

为什么功能无法识别?

ReferenceError: update_sub_process_fields is not defined

application.js

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require bootstrap-datepicker/core
//= require bootstrap-datepicker/locales/bootstrap-datepicker.pt.js
//= require_tree .

sub_processes.coffee

ready = ->

update_sub_process_fields = (sub_process_type_id) ->
  jQuery.ajax
    url: '/sub_processes/update_fields'
    type: 'GET'
    data: 'sub_process_type_id': sub_process_type_id
    dataType: 'html'
    success: (data) ->
      jQuery('#sub_process_fields').html data
      return
  return

$(document).ready(ready)
$(document).on('page:load', ready)

_form.erb.html

 <div class="field">
   <%= f.label :sub_process_type %>
   <%= f.select(:sub_process_type_id, options_for_select(SubProcessType.all.map {|s| [s.name, s.id]},sub_process.sub_process_type_id),{prompt: "Select Sub Process...", include_blank:true}, onChange: "update_sub_process_fields(this.value)") %>
  </div>


  <div class="field">
    <%= f.label :codenr %>
    <%= f.text_field :codenr %>
  </div>

<div id = "sub_process_fields">
  <div class="field">
    <%= f.label :name %>
    <%= f.text_field :name %>
  </div>

  <div class="field">
    <%= f.label :description %>
    <%= f.text_field :description %>
  </div>
</div>

解决方案

根据我的评论,您需要通过全局 window 对象公开您的函数。

所以替换:

update_sub_process_fields = (sub_process_type_id) ->

与:

window.update_sub_process_fields = (sub_process_type_id) ->

说明

Coffeescript 不会使局部变量可全局访问。在 JS 中你可以这样写:

var a = 1;
b = 2;

此处 a 是当前上下文的局部变量,而 b 是全局变量。

由于 Coffeescript 中没有 var 关键字,它使每个变量都是本地变量(以避免污染全局命名空间并导致错误)。要公开它,您需要使用像 commonjs 这样的系统来跨文件 importing/exporting 您可以将它附加到全局对象。在浏览器中,这是 window,而在服务器端 nodejs 应用程序中,它将是 global.

您可以通过在 coffeescript 中通过 delegated listener 附加 onChange 事件来绕过它。

例如:

document.on 'change', '.sub_process_type', update_sub_process_fields

其中 .sub_process_type 是 select 框中的一个 class,您想要监听其更改。


编辑

要通过事件侦听器获取值,您必须使用 event 对象 which is passed to event listeners by default

update_sub_process_fields = (event) ->
  sub_process_type_id = event.target.value
  jQuery.ajax
    url: '/sub_processes/update_fields'
    type: 'GET'
    data: 
      sub_process_type_id: sub_process_type_id
    dataType: 'html'
    success: (data) ->
      jQuery('#sub_process_fields').html data
      return
  return