进行AJAX调用以从搜索表单结果中获取数据以进行呈现。

Question

我正在制作一个股票应用程序，基本上用户需要输入股票代码，经过ajax调用后，它将返回包含价格，股票代码和名称的实例变量。它也将呈现在搜索栏的正下方。

这里是UI

这里的PIC是模型

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

这里是控制器

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 

，当我把放@ stock.price，我获取我想要的信息。然后它继续渲染我想要的页面，但它似乎不能让我得到在erb文件中呈现的信息，并且if条件表示@stock，表示必要的信息。

这里是给你一个我正在谈论的想法的看法。

<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一些有关选择在您的应用程序。

希望这会有所帮助。