レールで別のパーツを交換するにはどうすればよいですか？

Question

私はisbn_lookup_resultの部分的な部分に置き換えたい部分があります。私のページ上で私のGETリクエストによって与えられた結果を置き換えるためのajaxリクエストを作成するにはどうすればよいですか？私は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 ISBNため

<%= 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 %> 

現在の方法：ここで

は、関連するコードですlist.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要求の試みは、あなたがこれを行うと

$(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

（私はこれまでのところ取得を支援するためにjvillianする大きなshoutout）ファイルをisbn_lookup.js：

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

divにid="isbn-lookup-results-container"が含まれていないため、何も起こりません。あなたはautofocus: true何回も行う、

フォームで

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

：だから、あなたのような何かをしたいことがあります。フォームがロードされるときにオートフォーカスしたいフィールド上で一度だけ行います。

私は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にそれらをロードするために奇妙に思えます。