平变化显示/改变的部分(onchange display/change a partial)

2019-06-25 15:39发布

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

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

有部分所谓的“形式”

<%= render "form"%>

我需要呈现局部每当有选择的变化。 请让我知道如果有一种方法可以做到这一点。 我发现remote_function从轨3.0弃用。 我在这里跟平变化和选择标签看到所有可能的联系也没有找到一个合适的回答。 我是新来的铁轨,jQuery和阿贾克斯。 请帮忙

谢谢

Answer 1:

为什么不呈现在同一页面的形式和隐藏,并显示在选择标签变化

<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)
        }
     }) 

  })
})

在服务器端则需要使用的respond_to Ajax请求format.js并呈现模板定向使用渲染命令或只是定义.js.erb文件



Answer 2:

肯定是有办法做到这一点,它的一些工作,但一旦你得到了它的窍门它很容易。

首先,你要一个jQuery功能附加到change你的选择框的事件。 这可以通过添加一些JavaScript您要做application.js文件。 我们想在这里做,所以我们的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一个选择栏的ID为事件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

这可以简单地认为基于您的Ajax请求发送的ID文件夹change_folder 。 它也将寻找一个相应的change_folder.js.erbchange_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当然只是做了一个文件夹模式的特性。 你必须使用你给什么属性您的文件夹,而不是模型。

这应该让你去到你需要的人。 请让我知道如果你需要任何澄清。



文章来源: onchange display/change a partial