jquery - onchange 显示/更改部分

Question

使用选择有一个下拉列表

<%= select("array", "folder", @rows.keys, {}, :onchange =>"?" )%>

有一个部分称为“form”

<%= render "form"%>

只要选择发生变化，我就需要渲染部分内容。请让我知道是否有办法做到这一点。我发现从 Rails 3.0 开始，remote_function 已被弃用。我已经在这里看到了所有可能的带有 onchange 和 select 标签的链接，但找不到正确的答案。我是 Rails、jQuery 和 Ajax 的新手。请帮忙

谢谢

Answer 1

肯定有一种方法可以做到这一点，而且需要一些工作，但是一旦掌握了它，就很容易了。

首先，您需要将 jQuery 函数附加到选择框的 change 事件。这可以通过在 application.js 文件中添加一些 javascript 来完成。我们想在这里执行此操作，以便我们的 javscript 保持 unobtrustive 。您可以在 application.js 文件中尝试类似的操作:

$(document).ready(function(){
  $("#select_field_id").change(function(){
    var id = $(this).children(":selected").val();
    var params = 'some_id=' + id;
    $.ajax({
      url: "/some_controller/change_folder",
      data: params
    })
});

它的作用是将匿名函数附加到 ID 为 select_field_id 的选择字段的 change 事件。当该字段更改时，所选选项的 id 会存储在 var id 中，然后我们为将通过执行 发送的请求创建一个参数>var params = 'some_id=' + id;。 some_id 将是您要更改的内容的 ID(因此，如果您在示例中使用的是 folder_id)。

现在我们需要创建在 Controller 中处理此请求的方法。因此，以文件夹示例为例，将其添加到文件夹 Controller 中:

def change_folder
  @folder = Folder.find(params[:some_id])
  respond_to do |format|
    format.js
  end
end

这只是根据您的 ajax 请求发送到 change_folder 的 ID 来查找文件夹。它还会寻找相应的 change_folder.js.erb 或 change_folder.js 文件进行渲染。

现在我们需要编写一个 change_folder.js.erb 文件。我们需要用我们获得的新文件夹替换页面某些部分的 HTML，因此您应该有某种带有唯一 ID 的 div 或其他部分。

在change_folder.js.erb内，我们可以这样写:

$('#your_div').html("<%= escape_javascript(render(partial: "folder", 
locals: { :folder => @folder })).html_safe %>")

这将渲染一个名为 _folder.html.erb 的部分，它与 change_folder.js.erb 文件位于同一目录中。部分需要使用 @folder 变量来显示字段，因此您需要类似以下内容:

<%= @folder.name %>
<%= @folder.last_updated %>

在您的 _folder.html.erb 部分中。 .name 和 .last_updated 当然只是文件夹模型的属性。您必须使用为文件夹模型指定的任何属性。

这应该能让你到达你需要去的地方。如果您需要澄清任何内容，请告诉我。