Update Rails instance variable after ajax call

Question

I am trying to allow users to type in an ISBN number and receive data about the book. This works when a user enters an ISBN number the first time, but when he/she tries to change it the value cannot be updated (after trying to change the value, it changes itself back to the first ISBN number).

I have a _form.html.erb partial which is updated when something is typed into input#isbn_field. If the ISBN is valid, then info is updated to replace other information (author name, title, etc.) in the div with id: 'isbn-lookup-results-container'.

How can I allow the ISBN to be changed after the isbn_lookup_result partial has been loaded?

listings_controller.rb

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

lookup.js.coffee

$(document).ready ->
  TIMEOUT = null
  $(document).on 'keyup', 'input#isbn_field', ->
    clearTimeout TIMEOUT
    TIMEOUT = setTimeout((->
      ajaxResponse = $.ajax(
        url: '/listings/lookup'
        type: 'GET'
        data:
          isbn: $('input#isbn_field').val())
      ajaxResponse.success (data) ->
        $('#isbn-lookup-results-container').html data
        $('#form-unfilled').hide()
        return
      ajaxResponse.error (data) ->
        alert 'Not a valid ISBN'
        return
      return
    ), 2000)
    return
  return

_isbn_lookup_result.html.erb

<%= form_for(@listing, :html => {class: "form-horizontal" , 
    role: "form"}, method: :get) do |f| %>
       <div class="form-group">
        <%= f.text_field :isbn , class: "form-control" , 
              id: "isbn_field", placeholder: "ISBN (10 or 13 digits - no dashes)",         
              value: @isbn_lookup_result[:isbn], autofocus: true %>
        </div>
        # More stuff
<% end %>

score 0 · Answer 1 · answered Jan 13 '18 at 23:16

0

If I'm understanding you correctly, and I'd like to think I am, you're just encountering a javascript issue.

Right now you're binding an event to a selector that's in your DOM when your page is loaded. Instead, you want to bind to the body of the document and its contents based on an event.

I would try replacing $(document).on 'keyup', 'input#isbn_field', with $('body').on 'keyup', 'input#isbn_field',

Smarter people than me discuss this here Jquery Event won't fire after ajax call — a good Google foo would be something along the lines of bind event after ajax

answered Jan 13 '18 at 23:16

Josh Brody

5,153
1
14
25

Even when I do this, my rails console isn't showing another get request being sent (and the original isbn replaces whatever new one I add in). Based on my javascript, how can I make it so that another get request can be sent even after an initial AJAX call? – Jack Moody Jan 14 '18 at 04:40
Can you throw up an example on Github? – Josh Brody Jan 14 '18 at 05:29
Josh, [here](https://github.com/jackmoody11/api_example) is the repo for the problem. You will need to have your own access key for the Amazon request. – Jack Moody Jan 14 '18 at 15:45
[Here](https://docs.aws.amazon.com/AWSECommerceService/latest/DG/becomingAssociate.html) is the link for getting your own access keys. – Jack Moody Jan 14 '18 at 15:54
1

dropped some notes in the issues of that repo. – Josh Brody Jan 14 '18 at 19:48

Update Rails instance variable after ajax call

1 Answers1