Question

这将是我第一次尝试使用javascript。当有人在选择列表中选择特定选项时，我希望表单中的另一个字段变钝，因为它不再适用。我想我必须编写一个onchange事件处理程序并让它执行一个javascript脚本来检测所选的选项，如果选择了该选项，则呈现相关字段变钝的表单，如果选择了不同的选项，则呈现不同的表单...任何人请给我一个开始〜谢谢

Answer 1

您可以尝试这样的事情：

$(document).on('blur', "selector", function (e) { 
  // do what you want to do, change background, color, etc...
});

而不是selector类型，而不是您需要更改的元素的类，ID或其他选择器。

您可以将此代码段添加到app/assets/javascripts/application.js中包含的任何javascript文件中。你可以创建一个新的，如果没有适合你的话就把它添加到那里......

如果application.js以//= require_tree .结尾，则意味着它将需要该目录中的所有文件，而您无需手动要求它们。

顺便说一句，关于术语，元素在点击时具有焦点。当元素失去焦点时（例如，单击某个其他元素或按下制表符），它会变得模糊。那就是on（'blur'）被调用的时候。

这是你可以为选择写的（'更改'）：

$(document).on('change', 'select', function (e) {
  // do something
});

您需要输入正确的选择器，而不是'select'，否则每次选择更改时都会触发它。

我需要仅在我具体的值时触发动作选择了选择列表

没问题，试试这个：

$(document).on('change', 'select', function (e) {
  if ($(this).val() == 'specific_value'){
    // do something
  }
});

更新

我想从我的视图中调用jquery并替换元素在视图中输出jquery filename.js.erb文件

jQuery，所有其他javascript正在客户端（Web浏览器）中执行，而您的文件filename.js.erb位于服务器上，需要由rails处理。

这是如何做到的：

ajax请求被发送到服务器
它被铁路拾取，并被路由到控制器
由控制器操作处理
呈现javascript视图并将其作为回复发布

有两种方法可以实现这一目标。首先，我将解释两种方法共同的步骤。

您需要向routes.rb添加一条新路线，用作ajax呼叫的终点。 Here你可以阅读更多关于向rails添加路由的信息，但是为了这个答案的目的，我将使用这个简单的路由（有一个愚蠢的名字，你应该肯定地改变它）：

resource :my_ajax, only: :create

这就是路线的样子：

rake routes|grep my_ajax
# my_ajax POST    /my_ajax(.:format)   my_ajaxes#create

预计您有MyAjaxesController，并且create行动。您还应该通过将控制器添加到控制器来使控制器能够响应javascript请求：

class MyAjaxesController < AdminController
  # ...
  respond_to :js
  # ...

  def create
    # ...
  end
end

您还需要拥有该操作的视图：create.js.erb。您可以将javascript添加到该视图，但在那里您还可以使用rails控制器为您提供的所有内容。因此，您可以使用任何实例变量，也可以渲染部分变量。

这是部分渲染的方式：

$('#element').html('<%= j(render partial: "_my_partial", locals: { my_var: @my_var }) %>');

当浏览器收到对ajax请求的响应时，它只是将#element的内容替换为该部分呈现的任何html。

好的，现在来看看方法的差异。

你可以发送一个ajax请求（通过jQuery）瞄准你创建的端点（注意方法，我创建的路由期望POST）。在这种情况下，您需要手动管理您收到的任何响应。

但是，有一种方法可以做到这一点。您可以创建一个隐藏了所有字段的表单（在视图中不需要它，您只需要它作为发送请求的方法）。您需要为表单，方法指定操作，还要设置remote: true，以确保它是异步提交的。

以下是一个例子：

<%= form_tag(my_ajax_path, remote: true, method: :post) do %>
  <%= hidden_field_tag :some_field %>
<% end %>

您需要做的就是随时提交此表单（例如，通过查找id并调用submit：$('#my_form').submit();，它将完成剩下的工作。您还可以动态更改任何隐藏的输入提交前的表格。

$(document).on('change', 'select', function (e) {
  if ($(this).val() == 'specific_value'){
    $('#my_form').submit();
  }
});

至于测试rspec的控制器动作，为了让它工作，不要忘记控制器期望和渲染的是javascript请求，所以你需要指定格式：

it 'my test' do
  # expectations
  response = post :my_ajax, format: :js
  # assertions
end

Answer 2

您可以使用jquery的textFieldShouldBeginEditing事件来完成此操作。例如，您的选项选择如下：

change

然后，您必须创建jquery事件以执行下一个操作。例如：

<%= f.select :state, [['NSW'], ['VIC'], ['SA'], ['WA'], ['QLD']] %>

我希望这可以帮助您尝试尝试jquery的第一次体验。祝你好运！

rails窗体：当在另一个字段中选择特定选项时，如何模糊字段

2 个答案: