Question

使用select

有一个下拉列表

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

有一部分名为“形式”

<%= 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
    })
});

这样做是将匿名函数附加到标识为change的选择字段的select_field_id事件。更改该字段后，所选选项的id将存储在var id中，然后我们会通过执行var params = 'some_id=' + id;为我们发送的请求创建参数。 some_id将是您正在更改的内容的ID（如果您在示例中使用的是folder_id，则为def change_folder @folder = Folder.find(params[:some_id]) respond_to do |format| format.js end end。）

现在我们需要创建在我们的控制器中处理此请求的方法。因此，请使用文件夹示例，将其添加到文件夹控制器：

change_folder

这只会根据您对change_folder.js.erb的ajax请求发送的ID找到一个文件夹。它还将查找要呈现的相应change_folder.js或change_folder.js.erb文件。

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

在$('#your_div').html("<%= escape_javascript(render(partial: "folder", locals: { :folder => @folder })).html_safe %>")内，我们可以写下：

_folder.html.erb

这将呈现与change_folder.js.erb文件位于同一目录中的部分名为<%= @folder.name %> <%= @folder.last_updated %>的部分。部分将需要使用@folder变量来显示字段，因此您需要以下内容：

_folder.html.erb

在.name部分内。 .last_updated和{{1}}当然只是组成了Folder模型的属性。您必须使用您为Folder模型提供的任何属性。

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

Answer 2

为什么不在同一页面中呈现表单并隐藏并在更改 选择标记

上显示该表单

<html> 
  <body>

  <!-- Your Select tag -->
  <select id="select_id"> 
    <option value="one" selected> One </option>
    <option value="two"> Two </option>
  </select>

  <!-- Here your a div inside with your form is placed -->
  <div id="myform" style="display:none">
    <form action="/someurl">
      .. ..
    </form> 

   <!-- JQuery code to  show the form -->
  <script type="text/javascript">
    $(document).ready(function() {
       $("select#select_id").bind("change",function() {
         if ($(this).val() == "one") 
          $("div#myform").show(); 
         else
          $("div#myform").hide(); 
       })
   })

  </script>

</html>

我仍然想要制作一个非常简单的ajax请求

$(document).ready(function() {
  $("select#select_id").bind("change",function() {
    if ($(this).val() == "one") {
     $.ajax({
        url : "/form_url",
        data : "html", 
        type: "GET",
        success : function(data) {
          $("div#myform").html(data)
        }
     }) 

  })
})

在服务器端，您需要使用format.js响应ajax请求并使用render命令呈现模板，或者只定义.js.erb文件

onchange显示/更改部分

2 个答案: