如何在 Ruby on Rails 中使用带有 form.select 的 jquery .click() 方法？

Posted 2023-05-09

【中文标题】如何在 Ruby on Rails 中使用带有 form.select 的 jquery .click() 方法？

【英文标题】：How to use jquery .click() method with form.select in Ruby on Rails?

【发布时间】：2021-04-30 18:31:18

【问题描述】：

我有一个带有选择输入的表单，称为 units_system，可以是公制或英制。

<%= form.select :units_system, [['metrical', id: 'metrical'], ['imperial', id: :imperial]], prompt: 'Select units system', class: "form-control", id: :item_units_system%>

生成html

<select class="form-control" id="lot_units_system" name="lot[units_system]"><option value="">Select units system</option>
<option id="metrical" value="metrical">metrical</option>
<option id="imperial" value="imperial">imperial</option></select>

取决于我的选择，我想在 <div id=”cargo_form”></div> 中渲染不同的部分

如果我点击 id="metrical"，我想在 <div id=”cargo_form”></div> 中看到文本“METRICAL”。

所以我把我的 new.js.erb 放入下一个 jquery 代码：

$('#metrical').click(function(e) 
    e.preventDefault();
    $('#cargo_form').html('METRICAL');
);

但是什么都不会发生。我在<div id=”cargo_form”></div> 中没有看到任何结果

我做错了什么？感谢您的帮助！

【参考方案1】：

您想将代码放入您的 webpack application.js 或资产管道中。

$(document).on('click', '#metrical', function(e) 
  e.preventDefault();
  $('#cargo_form').html('METRICAL');
);

服务器端问题 - 这基本上是 Rails UJS 为 JS 发送 XHR 请求和呈现 js.erb 视图的组合，基本上只是用服务器端生成的字符串替换页面中的内容。这使您可以在前端重用服务器端模板。

它们通常看起来像这样：

document.querySelector('#someElement')
        .innerHTML = "<%= j(render 'something') %>";

这实际上只是在 Rails UJS 将 javascript 响应弹出到脚本标记时替换页面上的内容。

当您只是添加一个简单的事件处理程序时，根本不需要 SSC。