如何在不重定向的情况下呈现Rails对象？

Question

道歉，因为我是Rails开发新手的相对论。我想根据用户在UI中的选择来显示Rails对象。简化动物和动物园的问题，:) ...

我有一个动物园的Rails模型，它有很多'动物'。亲子关系。

在给定的动物园'show'页面中，我希望用户能够从下拉框中选择相关动物，然后让动物的对象细节显示在同一页面上，即不重定向。有没有EASY rails方式来做到这一点？或者我是否必须努力使Javascript与Rails变量进行对话？

提前感谢您的帮助，非常感谢！

Answer 1

我无法想到一种方法，但想到ajax来完成这样的任务，任何方式都是我的谅解......

P.S由于你没有提供任何代码，我不得不做出一些假设......

• 动物园和动物都只有一个名称
属性
• 动物的信息将以无序列表显示
• 您正在使用资产管道，coffescript和turbolinks 5

首先你应该更新 zoos / show.html.erb 以获得动物选择菜单和动物的信息列表。

应用/视图/动物园/ show.html.erb

<p>
  <strong>Name:</strong>
  <%= @zoo.name %>
</p> 
<br>
<p>
  <strong>Animal:</strong>
  <%= select_tag "animals", options_from_collection_for_select(@zoo.animals, "id", "name"), id: 'select_animal', prompt: "Select Animal to view its info" %>
</p>

<div id="animalInfo">
  <ul>
    <li><strong>Name: </strong><span id="animalName"></span></li>
    <li><strong>Created at: </strong><span id="animalCreated"></span></li>
    <li><strong>Updated at: </strong><span id="animalUpdated"></span></li>
  </ul>
</div>

第二，你应该在你的动物视图中有一个名为 show.json.jbuilder 的文件，如果你有它跳到下一步，否则创建它并放入以下代码......

json.partial! "animals/animal", animal: @animal

第三步将以下代码添加到Zoo脚本中，查看代码内部以获取解释

应用/资产/ Javascript角/ zoos.coffe

ready = ->
  $('#animalInfo').hide() # hides the animal's info div
  $('#select_animal').change -> # listen to changes in the animals select menu
    if $(this).val() 
      animalId = $(this).val()
      output = undefined
      $.ajax #calls the animal object but its id
        url: '/animals/'+ animalId + '.json',
        type: 'GET',
        dataType: 'json',
        async: false
        complete: (jqXHR, textStatus) ->
        success: (data, textStatus, jqXHR) -> #return a json animal object
          # You can call any object attribute the same way with ruby
          # Like this: data.attribute
          # Edit this part to adapt with your code
          $('#animalName').text(data.name)
          $('#animalCreated').text(data.created_at)
          $('#animalUpdated').text(data.updated_at)
          $('#animalInfo').slideDown()
        error: (jqXHR, textStatus, errorThrown) ->
    else
      $('#animalInfo').slideUp() # hides the animal's info div if no animal selected
$(document).on('turbolinks:load', ready)

我认为你应该调整上面的代码以适应你的，但这个概念是一样的，希望它有所帮助。