4

有一个使用选择的下拉菜单

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

有一种局部叫“形”

<%= render "form"%>

I need to render the partial whenever there is a change in the selection. 请让我知道是否有办法做到这一点。我发现remote_functionRails 3.0 已弃用。我在这里看到了所有带有 onchange 和 select 标签的可能链接，但找不到正确的答案。我是 Rails、jQuery 和 Ajax 的新手。请帮忙

谢谢

4

2 回答 2

12

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

首先，您需要将一个 jQuery 函数附加到change您的选择框的事件中。这可以通过在application.js文件中添加一些 javascript 来完成。我们想在这里这样做，所以我们的 javscript 保持不引人注目。你可以在你的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具有 id 的选择字段的事件select_field_id。当该字段更改时，id所选选项的 var 存储在 varid中，然后我们为将要发送的请求创建一个参数 do 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

这只是根据您的 ajax 请求发送到的 id 找到一个文件夹change_folder。它还将寻找相应的change_folder.js.erb或change_folder.js文件来渲染。

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

在里面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您将不得不使用您为文件夹模型提供的任何属性。

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

于 2012-06-21T16:16:17.897 回答
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在服务器端，您需要使用 render 命令来响应 ajax 请求并渲染模板，或者只定义一个.js.erb文件

于 2012-06-21T16:06:57.617 回答