2017-09-18 2 views
0

isbn_lookup_result 부분으로 대체하려는 부분이 있습니다. 내 페이지에서 내 GET 요청에 의해 주어진 결과를 대체 할 아약스 요청을 어떻게 작성합니까? 나는 this SO post을 보았지만, 내가 찾고있는 것 같지 않습니다. (뷰>의 목록) (> 목록 뷰)하나의 부분을 다른 부분으로 대체하려면 어떻게해야합니까?

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

현재 방법

_form.html.erb : 여기

는 관련 코드 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에서 1,363,210

조회 작업은

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); 
    }); 

}); 
+1

안녕하세요. '_form.html.erb' 전체로 질문을 업데이트 할 수 있습니까? 나는 그 형태가 실제로하는 것에 대해 더 나은 느낌을 갖기 위해 노력하고 있습니다. 게시 한 비트부터 사용자가 ISBN 또는 제목을 조회 할 수있는 것처럼 보입니다. 맞습니까? – jvillian

+0

나머지 _form.html.erb 코드 jvillian이 추가되었습니다. 논리적 도약에서 결과를 얻지 못하고 실제로 결과를 표시하는 데 문제가 있습니다 (부분 부분에서 isbn_lookup_result 부분으로 변경). –

+0

또한 Javascript의 변수는 일반적으로 @ 기호로 선언되지 않았습니까? '@ TIMEOUT'을'var timeout = null'으로 바꾸고'@ TIMEOUT' 대신'timeout'을 사용해야합니까? –

답변

1

(나를 여기까지 얻을 도와 jvillian에 큰 shoutout) 파일을 isbn_lookup.js :

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

divid="isbn-lookup-results-container"이 아니기 때문에 아무 일도 일어나지 않을 것입니다. 그래서, 당신은 같은 것을 수행 할 수 있습니다 : 양식에서

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

을, 당신은 autofocus: true 많은 시간을. 양식이로드 될 때 자동 초점을 설정하려는 필드에서 한 번만 수행하십시오. _form.html.erb의 형태로

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

당신의 _isbn_lookup_result.html.erb이 동일 보인다 : 나는 self.isbn_lookup의 끝을 만들 것이라고 생각

는 같은 isbn, 뭔가를 포함한다. 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%> 

그래야 isbntitle의 값은 새로운 형태로 표시됩니다.

어디서나 author, manufacturer 또는 url을 사용하지 마십시오. 그게 네가 원하는거야? 만약 당신이 그들을 사용하지 않을거야 귀하의 hash에로드하는 이상한 것 같습니다.

+0

나는'author','manufacturer' 및'url'을 추가하여 나중에 원할 경우 사용할 수 있도록하기로했습니다. 그러나, 나는 아직도 이것에 약간 어려움이있다. 내 아약스가 타이핑을 마친 것을 인식하지 못하는 것 같습니다. id가 'isbn-lookup-results' 인 div를 추가하도록 코드를 변경했습니다. –

관련 문제