Wie ersetze ich einen Teil durch einen anderen in Schienen?

Question

Ich habe eine partielle Form, die ich mit einem isbn_lookup_result teilweise ersetzen möchte. Wie erstelle ich eine Ajax-Anfrage, um das Ergebnis meiner GET-Anfrage auf meiner Seite zu ersetzen? Ich habe mir this SO post angesehen, aber es scheint nicht das zu sein, wonach ich suche.

Hier ist der relevante Code:

_form.html.erb (in Ansichten> Inserate)

<%= 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 (in Ansichten> Inserate)

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

Aktuelle Verfahren für ISBN Nachschlagen, die Informationen über das Buch in der Datei listing.rb zurückgibt

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 

Lookup Aktion in listings_controller.rb

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

Versuch AJAX-Request isbn_lookup.js Datei (big shoutout jvillian mich bis hierher geholfen zu bekommen)

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

Wenn Sie dies tun:

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

nichts wird passieren, weil Sie kein div mit id="isbn-lookup-results-container" haben. Also, Sie können so etwas wie zu tun:

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

In Formularen, tun Sie autofocus: true viele Male. Tun Sie es nur einmal auf dem Feld, das beim Laden des Formulars automatisch fokussiert werden soll.

Ich glaube, ich würde das Ende self.isbn_lookup machen umfassen die isbn, so etwas wie:

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

Ihre _isbn_lookup_result.html.erb auf die Form in _form.html.erb identisch sein aussieht. Willst du nichts mit den Ergebnissen von isbn_lookup machen? so etwas wie vielleicht:

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

Damit die Werte für isbn und title werden in der neuen Form gezeigt.

Sie verwenden author, manufacturer oder url nirgendwo. Ist das was du vorhast? Es scheint seltsam, diese in Ihre hash zu laden, wenn Sie sie nicht verwenden werden.