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
我正在尝试(现在整个上午:-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