Rails：在 Rails 视图中使用 javascript 函数的正确语法

Posted 2023-02-26

【中文标题】Rails：在 Rails 视图中使用 javascript 函数的正确语法

【英文标题】：Rails: proper syntax for using a javascript function inside a rails view

【发布时间】：2012-07-16 12:02:29

【问题描述】：

我正在尝试在表单中使用一些 javascript 从选择下拉框中获取值，并在表单的另一部分使用它。我无法弄清楚语法。

首先是 javascript 函数（我把它放在视图的末尾）：

<script type="text/javascript">
  function return_event_id()
  
    var event_id = document.getElementById("event_id");
    return event_id.value;
  
</script>

在视图内部，我有以下内容：

<%= select("discount_code", :event_id, events_ids_titles_hash,  :include_blank => true ) %>

如果我添加以下语句：

return_event_id

然后我选择的下拉项显示在表单上（虽然我也看到了 return_event_id 这个词）。

如果我这样做：

<% selected_event_id =  return_event_id %> 

我收到以下错误消息：未定义的局部变量或方法 `return_event_id'

我正在寻找的是能够将 event_id 值存储在变量中。正确的语法是什么？

关于答案的其他详细信息和 cmets：

1：是的，Ruby 代码 = 服务器，javascript 代码 = 客户端

2：将代码放在 application.js 之类的代码中会将其移出 view.erb 模块，但据我所知，它不会改变结果。

我知道 将不起作用，但我确实需要达到一个点，我可以以某种方式将 return_event_id 的输出传递回服务器，然后将其捕获到 Ruby 变量中，或者, 如果有办法使用 javascript 函数输出来设置表单中的另一个元素。

【问题讨论】：

您正试图从 ruby​​ 语句（在客户端甚至知道有响应之前在服务器上运行）调用 javascript 函数（在浏览器上运行）？世界上没有任何语法可以解决这个问题。

什么是 Selected_event_id 是文本框（html）还是服务器端的东西？

【参考方案1】：

对于初学者，最好将 javascript 与视图分开：

将你的 js 写在一个单独的文件中，根据你的 rails 版本将它放在 public 或你的 assets 目录中。 然后，如果您在 raila 3.1+，它将自动加载您的资产，如果低于 3.1，则将以下内容添加到您的视图中（在顶部）

<%= javascript_include_tag "my_javascript_filename" %>

您可以从那里创建一个 ajax 请求返回到您的 Rails 应用程序（这意味着编写控制器代码和处理此问题的路由）以获取您想要的项目列表：

http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/ 我建议使用上述 URL 中的 getJSON 方法

【讨论】：

这将允许您从 ruby​​ 调用 javascript 函数？

不能从 Ruby 中调用 js 函数。 Ruby在服务器上运行，js在客户端。

您可以通过 ajax 调用将信息发送回服务器。

是的，你可以。也许你会考虑写一些解释 OP 错误并解决问题的东西，而不是一个根本不能解决问题的答案。

请查看我的问题的编辑。除了将函数移动到另一个文件之外，该问题未得到解决。如果它可以通过 Ajax 调用传回服务器，我将不胜感激指针/示例。

【参考方案2】：

要让你的 JavaScript 函数被调用，你有两个选择：

1) 直截了当：

让 select_tag 生成一个 html 属性“onchange”

select("discount_code", :event_id, events_ids_titles_hash,  
    :include_blank => true, 
    :onchange => "fill_my_event_data();"
    

然后编写一个 JavaScript 函数“fill_my_event_data”，它使用您的 return_event_id()，然后将您需要的数据放入您想要的表单元素中。

2) 在 jQuery 中使用“不显眼的 JavaScript”。然后你不需要在 Rails 中做太多事情（除了提供正确的 id 和数据属性）。您在底部的 JavaScript 部分中执行所有操作。您将选择标记与再次调用您的函数的事件处理程序连接起来。当然，您需要学习 jQuery 的基础知识。如果你需要经常做这样的事情，jQuery的知识很有用。

【讨论】：

抱歉，我提交了一个不完整的答案

谢谢。我知道 onchange 语法，但我弄乱了 getElementById 语法（将其设置为一个值）。正确的方法是这样的： document.getElementById("old_event_id").value=return_event_id