Rails形式：当在另一个字段中选择特定选项时，如何模糊一个字段

Question

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

Answer 1

您可以尝试如下操作：

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

您无需更改元素的类，id或其他选择器中的selector类型。

您可以将此代码段添加到app/assets/javascripts/application.js包含的任何javascript文件中。 您可以创建一个新的文件，然后在现有文件不适合您的情况下添加它

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

顺便说一句，关于术语，单击元素会使其具有焦点。 当元素失去焦点时（例如，单击某些其他元素或按下选项卡），它会变得模糊。 那是当on（'blur'）被调用时。

这是您可以在select上写on（'change'）的方法：

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

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

我仅在选择列表中的特定值时才需要触发操作

没问题，试试这个：

$(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处理。

这是可以做到的：

1. ajax请求发送到服务器
2. 它被导轨拾取，并被路由到控制器
3. 它由控制器动作处理
4. 呈现javascript视图并作为响应发布

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

您将需要在routes.rb中添加新路由， routes.rb其用作ajax调用的端点。 在这里，您可以阅读有关将路线添加到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请求的响应时，它只是用该部分呈现的html替换#element的内容。

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

您可以发送ajax请求（通过jQuery），该请求针对您创建的端点（注意方法，我创建的路由需要POST）。 在这种情况下，您需要手动管理收到的任何回复。

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

这是一个例子：

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

您需要做的就是随时随地提交此表单（例如，通过查找ID并调用$('#my_form').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的change事件来执行此操作。 例如，您的选项选择如下：

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

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

<script>
  $(document).ready(function(){ 
   // hidding form
   $("#form_1").hide();
   $("#form_2").hide();
   // showing form after user changes the select option
    $("#user_state").change(function(){
      var selected = $(this).val();
      if(selected == "VIC") {
        $("#form_1").show();
      } else {
        $("#form_2").show();
      }
    });
  });
</script>

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