AJAX 호출을 사용하여 검색 양식에서 데이터를 가져 와서 렌더링합니다.

Question

재고 응용 프로그램을 만들고 있는데 기본적으로 사용자는 시세표를 입력해야하며 ajax 호출을 거친 후 가격, 시세 및 이름이 포함 된 인스턴스 변수를 반환합니다. 또한 검색 창 바로 아래에 렌더링됩니다. 여기

은 내가, 내가 stock.price @ 박았을 박았 때 UI 여기

의 그림 컨트롤러

class StocksController < ApplicationController 

    def search 
     if params[:stock] 
      @stock = Stock.find_by_ticker(params[:stock]) 
      @stock ||= Stock.new_from_lookup(params[:stock]) 
     end 
     if @stock 
      puts @stock.price 
      render partial: 'lookup' 
     else 
      render status: :not_found, nothing: true 
     end 
    end 

end 

모델 여기

<div id="stock-lookup"> 
    <h3>Search for Stocks</h3> 
    <%= form_tag search_stocks_path, remote: true, method: :get, id: 'stock-lookup-form' do %> 
    <div class="form-group row no-padding text-center col-md-12"> 
     <div class="col-md-10"> 
     <%= text_field_tag :stock, 
     params[:stock], 
     placeholder: 'Stock Ticker Symbol', 
     autofocus: true, 
     class: 'form-control search-box input-lg' %> 
    </div> 
    <div class="col-md-2"> 
     <%= button_tag(type: :submit, class: 'btn btn-lg btn-success') do %> 
      <i class='fa fa-search'></i> Look up a stock 
     <% end %> 
    </div> 
</div> 
<% end %> 
<% if @stock %> 
<div id="stock-lookup-results" class="well results-block"> 
    <strong>Symbol:</strong> <%= @stock.ticker %> 
    <strong>Name:</strong> <%= @stock.name %> 
    <strong>Price:</strong> <%= @stock.price %> 
</div> 
<div id="stock-lookup-errors"></div> 
<% end %> 
</div> 

입니다입니다 내가 원하는 정보를 얻는다. 그런 다음 원하는 페이지를 렌더링하기 위해 계속 진행하지만, 나에게 @stock이 필요한 정보를 표시하는 if 조건을 사용하여 erb 파일에 렌더링되는 정보를 얻지 못하는 것 같습니다.

여기 내가 내가 말하는 것에 대한 아이디어를 제공하는보기입니다.

<div id="stock-lookup"> 
    <h3>Search for Stocks</h3> 
    <%= form_tag search_stocks_path, remote: true, method: :get, id: 'stock-lookup-form' do %> 
    <div class="form-group row no-padding text-center col-md-12"> 
     <div class="col-md-10"> 
     <%= text_field_tag :stock, 
     params[:stock], 
     placeholder: 'Stock Ticker Symbol', 
     autofocus: true, 
     class: 'form-control search-box input-lg' %> 
    </div> 
    <div class="col-md-2"> 
     <%= button_tag(type: :submit, class: 'btn btn-lg btn-success') do %> 
      <i class='fa fa-search'></i> Look up a stock 
     <% end %> 
    </div> 
</div> 
<% end %> 
<% if @stock %> 
<div id="stock-lookup-results" class="well results-block"> 
    <strong>Symbol:</strong> <%= @stock.ticker %> 
    <strong>Name:</strong> <%= @stock.name %> 
    <strong>Price:</strong> <%= @stock.price %> 
</div> 
<div id="stock-lookup-errors"></div> 
<% end %> 
</div> 

나는 또한 일을하고있는 것처럼 보이는 별도의 js 파일에서 ajax 호출을 작성하고 있습니다.

var init_stock_lookup; 

init_stock_lookup = function() { 
    $('#stock-lookup-form').on('ajax:success', function(event, data, status) { 
     $('#stock-lookup').append(data); 
     init_stock_lookup(); 
    }) 
} 

    $('#stock-lookupform').on('ajax:error',function(event, xhr, status, error){ 
     $('#stock-lookup-results').replaceWith(' '); 
     $('#stock-lookup-errors').replaceWith('Stock was not found.') 
    }); 

$(document).ready(function(){ 
    init_stock_lookup(); 
}) 

def는 레일이나 루비 마스터가 아니므로 도움이 될 것입니다.

Answer 1

컨트롤러 동작에서 render partial: 'lookup'을 호출 할 때 어떤 일이 일어나고 있는지 응답으로 코드를 제공하고 있습니다. 브라우저의 개발자 콘솔에서 확인할 수는 있지만 응답 앞에 무엇을 추가 할 것인지 알 수 없습니다. 이 컨트롤러 액션 쓰기에서

: 그것은이를보십시오 DOM 등 등

에서 모든 HTML을 대체 당신에

def search 
    if params[:stock] 
    @stock = Stock.find_by_ticker(params[:stock]) 
    @stock ||= Stock.new_from_lookup(params[:stock]) 
    end 
    respond_to do |format| 
    format.js 
    end 
end 

이 app/views/stocks 파일을 생성 search.js.erb과 코드 작성에 :

<% if @stock %> 
    $('body').html("<%= j render partial: 'lookup' %>"); 
<% end %> 

당신은 definetely 응용 프로그램에서 몇 가지 관련 셀렉터 $('body').html을 변경해야 할 것이다.

희망이 도움이됩니다.