Rails 5引用错误:函数没有定义

I'm trying (all morning now :-S) to load a js function on onChange to fill in some fields in a form. I've already searched for solutions for this, which made me add jquery-turbolinks and even try and remove turbolinks. This didn't work.

我(整个上午都在尝试:-S)在onChange上加载一个js函数，以填充表单中的某些字段。我已经为此寻找了解决方案，这使我添加了jquery-turbolinks，甚至尝试删除turbolinks。这没有工作。

Why is it that the function is not recognized ?

为什么函数不被识别?

ReferenceError: update_sub_process_fields is not defined

ReferenceError:没有定义update_sub_process_fields

application.js

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

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

_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>

1 个解决方案

#1

Solution

As per my comment, you need to expose your function via the global window object.

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

So replace:

所以更换:

update_sub_process_fields = (sub_process_type_id) ->

with:

:

window.update_sub_process_fields = (sub_process_type_id) ->

Explanation

Coffeescript doesn't make local variables globally accessible. In JS you could write:

Coffeescript不能使局部变量具有全局可访问性。在JS中可以这样写:

var a = 1;
b = 2;

Here a would be local to the current context, while b is a global variable.

这里a是当前上下文的局部变量，而b是全局变量。

As there is no var keyword in Coffeescript, it makes every variable local (to avoid polluting the global namespace and causing errors ). To expose it you need to use a system like commonjs for importing/exporting across files or you can attach it to a global object. In a browser this is window, while in a server side nodejs app it would be global.

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

You could get around it by attaching the onChange event via a delegated listener in your coffeescript.

您可以通过在coffeescript中通过委托侦听器附加onChange事件来绕过它。

eg:

例如:

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

where .sub_process_type is a class on the select box you want to listen for changes on.

where .sub_process_type是在选择框上的一个类，您想要侦听更改。

---

Edit

To get the value via the event listener, you will have to use the event object 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

---