Dynamic update with method calling to Amazon API - ruby-on-rails

Question

I am a beginner in Rails, but I have done a lot of searching on this and can't seem to find something to help me since I am having difficulty breaking down the problem. I have built a working method that requests information about a book given the ISBN from Amazon and would now like to use it to autofill information about the book after a user enters in the ISBN into a form. Here is my method (which is in my listing.rb model file):
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
Here is my controller for now. I am not sure how to make this generic so that the ISBN number relies on what the user enters (it should take in a value given by the user instead of assuming the #isbn instance variable is always set):
def edit
#isbn = Listing.isbn_lookup(1285741552)
end
Here is my _form.html.erb partial where I want to call this ISBN autofill:
<%= 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>
...
<% end %>
Finally, here is my JS for what I think should maybe be the start to the AJAX call:
$(document).ready(function() {
$(document).on('keyup','input#auto-isbn',function() {
$.get(this.action, $(this).serialize(), null, "script");
return false;
});
});
How do I make it so that when users put in an ISBN, my app will call the isbn_lookup method and then return the information gathered?

Answer 1

To begin, I would create a lookup path in your routes.rb file. That would look something like:
resources :listings do
collection do
get :lookup
end
end
Which will give you:
lookup_listings GET /listings/lookup(.:format) listings#lookup
Then create the lookup action in your listings_controller.rb, something like:
class ListingsController < ApplicationController
...
def lookup
#isbn_lookup_result = Listing.isbn_lookup(params[:isbn])
render partial: 'isbn_lookup_result'
end
...
end
Naturally, this requires that you have a _isbn_lookup_result.html.erb file that accesses/uses the values from #isbn_lookup_result.
Then, to call this action from your JS, do something like (full disclosure, I use coffeescript, so my plain JS skills are a little rusty):
$(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){
# do stuff with your data response
# perhaps something like:
$('#isbn-lookup-results-container').html(data)
});
}, 500);
});
});
This bit:
clearTimeout(#TIMEOUT)
#TIMEOUT = setTimeout(function(){
...
}, 500);
creates a 1/2 second delay between when your user stops typing and when the ajax function is called. That way, you're not literally doing a lookup on every keyup, only when the user pauses in their typing.
This bit:
var ajaxResponse = $.ajax({
url: "listings/lookup",
type: 'GET',
data: {isbn: $('input#auto-isbn').val()}
});
is the AJAX call. You can see the new listings/lookup path in use. The data: {isbn: $('input#auto-isbn').val()} bit gives you params[:isbn], which is used in the lookup action.
Then, upon success, you use this bit to do something with your response:
ajaxResponse.success(function(data){
# do stuff with your data response
# perhaps something like:
$('#isbn-lookup-results-container').html(data)
});
In this case, data is the HTML that resulted from the render partial: call, so could load it into a div.