如何在 rails 中将一个部分替换为另一个？

Question

我有一个表格部分，我想用 isbn_lookup_result 部分替换。如何发出 ajax 请求来替换页面上 GET 请求提供的结果？我看过 this SO post，但它似乎不是我要找的。

相关代码如下：

_form.html.erb（在浏览量 > 列表中）

    <%= render "shared/errors", obj: @listing %>

<div class="row">
  <div class="col-md-12">
    <%= form_for(@listing, :html => {class: "form-horizontal" , role: "form"}, method: :get) do |f| %>
    <div class="form-group">
      <div class="control-label col-sm-2">
        <%= f.label :isbn, "ISBN" %>
      </div>
      <div class="col-sm-8">
        <%= f.text_field :isbn, id: "auto-isbn", class: "form-control" , placeholder: "ISBN (10 or 13 digits)", autofocus: true %>
      </div>
    </div>
    <div class="form-group">
      <div class="control-label col-sm-2">
        <%= f.label :title %>
      </div>
      <div class="col-sm-8">
        <%= f.text_field :title , class: "form-control" , placeholder: "Title of book", autofocus: true %>
      </div>
    </div>
    <div class="form-group">
      <div class="control-label col-sm-2">
        <%= f.label :condition %>
      </div>
      <div class="col-sm-8">
        <%= f.text_field :condition , class: "form-control" , placeholder: "Book condition", autofocus: true %>
      </div>
    </div>
    <div class="form-group">
      <div class="control-label col-sm-2">
        <%= f.label "Department(s)" %>
      </div>
        <div class="col-sm-8">
          <%= f.collection_select(:category_ids, Category.all, :id, :name,{:"data-style" => "form-control", :"data-size" => "5"}, {class: "selectpicker", title: "Choose Department(s)", multiple: true}) %>
        </div>
    </div>
    <div class="form-group">
      <div class="control-label col-sm-2">
        <%= f.label :price %>
      </div>
      <div class="col-sm-8">
        <%= f.text_field :price , class: "form-control" , placeholder: "Price (in $USD)", autofocus: true %>
      </div>
    </div>
    <div class="form-group">
        <div class="control-label col-sm-2">
          <%= f.label :description  %>
        </div>
        <div class="col-sm-8">
          <%= f.text_area :description , rows:8, class: "form-control", placeholder: "Description", autofocus: true %>
        </div>
      </div>
    <div class="form-group">
        <div class="col-sm-10 col-sm-offset-2">
          <%= f.submit class: "btn btn-primary btn-lg" %>
        </div>
    </div>
  <%end%>
  </div>
</div>

<div class="col-xs-4 col-xs-offset-4">
  <%= link_to "Cancel request and return to listings page", listings_path %>
</div>

_isbn_lookup_result（在浏览量 > 列表中）

<%= form_for(@listing, :html => {class: "form-horizontal" , role: "form"}, method: :get) do |f| %>
     <div class="form-group">
      <div class="control-label col-sm-2">
        <%= f.label :isbn, "ISBN" %>
      </div>
      <div class="col-sm-8">
        <%= f.text_field :isbn, id: "auto-isbn", class: "form-control" , placeholder: "ISBN (10 or 13 digits)", autofocus: true %>
      </div>
    </div>
    <div class="form-group">
      <div class="control-label col-sm-2">
        <%= f.label :title %>
      </div>
      <div class="col-sm-8">
                <%= f.text_field :title , class: "form-control" , placeholder: "Title of book", autofocus: true, id: "isbn-lookup-results-container" do %><%= @isbn_lookup_result[:title] %><% end %>

      </div>
    </div>
    ...
    <% end %>

ISBN 查找的当前方法 returns 关于 listing.rb 文件中图书的信息

def self.isbn_lookup(val)
request = Vacuum.new('US')
request.configure(
aws_access_key_id: 'access_key_here',
aws_secret_access_key: 'secret_access_key_here',
associate_tag: 'associate_tag_here'
)
response = request.item_lookup(
  query: {
    'ItemId' => val,
    'SearchIndex' => 'Books',
    'IdType' => 'ISBN'
  },
  persistent: true
)
fr = response.to_h #returns complete hash
author = fr.dig("ItemLookupResponse","Items","Item","ItemAttributes","Author")
title = fr.dig("ItemLookupResponse","Items","Item","ItemAttributes","Title")
manufacturer = fr.dig("ItemLookupResponse","Items","Item","ItemAttributes","Manufacturer")
url = fr.dig("ItemLookupResponse","Items","Item","ItemLinks","ItemLink",6,"URL")
return {title: title, author: author, manufacturer: manufacturer, url: url}
  end

listings_controller.rb

中的查找操作

  def lookup
    @isbn_lookup_result = Listing.isbn_lookup(params[:isbn])
    render partial: 'isbn_lookup_result'
  end

尝试 AJAX 请求 isbn_lookup.js 文件（感谢 jvillian 帮助我走到这一步）

$(document).ready(function() {
  @TIMEOUT = null

  $(document).on('keyup','input #auto-isbn',function() {
    clearTimeout(@TIMEOUT)
    @TIMEOUT = setTimeout(function(){
      var ajaxResponse = $.ajax({
        url: "listings/lookup",
        type: 'GET',
        data: {isbn: $('input#auto-isbn').val()}
      });
      ajaxResponse.success(function(data){
        $('#isbn-lookup-results-container').html(data)
      });
      //ajaxResponse.error(function(data){
        // Make an error div or something show up
      //});
    }, 500);
  });

});

Answer 1

当你这样做时：

$('#isbn-lookup-results-container').html(data)

什么都不会发生，因为您没有 div 和 id="isbn-lookup-results-container"。因此，您可能想要执行以下操作：

<div class="row">
  <div id="isbn-lookup-results-container" class="col-md-12">
    ...
  </div>
</div>

在您的表格中，您 autofocus: true 多次。仅在您希望在加载表单时自动对焦的字段上执行一次。

我想我会在 self.isbn_lookup 的结尾包含 isbn，例如：

return {title: title, author: author, manufacturer: manufacturer, url: url, isbn: val}

您的 _isbn_lookup_result.html.erb 看起来与 _form.html.erb 中的表格相同。您不想对 isbn_lookup 的结果做些什么吗？也许是这样的：

<%= form_for(@listing, :html => {class: "form-horizontal" , role: "form"}, method: :get) do |f| %>
  <div class="form-group">
    <div class="control-label col-sm-2">
      <%= f.label :isbn, "ISBN" %>
    </div>
    <div class="col-sm-8">
      <%= f.text_field :isbn, id: "auto-isbn", class: "form-control" , placeholder: "ISBN (10 or 13 digits)", value: @isbn_lookup_result[:isbn] %>
    </div>
  </div>
  <div class="form-group">
    <div class="control-label col-sm-2">
      <%= f.label :title %>
    </div>
    <div class="col-sm-8">
      <%= f.text_field :title , class: "form-control" , placeholder: "Title of book", value: @isbn_lookup_result[:title], autofocus: true %>
    </div>
  </div>
  ...
<%end%>

以便 isbn 和 title 的值以新形式显示。

您没有在任何地方使用 author、manufacturer 或 url。那是你想要的吗？如果您不打算使用它们，将它们加载到您的 hash 中似乎很奇怪。

如何在 rails 中将一个部分替换为另一个？

How do I replace one partial with another in rails?

ajax

ruby-on-rails

partials