轨道搜索栏不起作用

Question

我之前运行了一个脚手架来创建一个充满股票的数据库。他们有名字、股票名称和价格。我现在打算做的是创建一个搜索栏来异步查询这些股票。 （AJAX）这是我的 javascript：

     var init_stock_lookup;

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

$('#stock-lookup-form').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 search
  if params[:stock]
   @stock=Stock.find_by_ticker(params[:stock])
 end

if @stock
  render partial: 'lookup'
  else
  render status: :not_found, nothing: true
end

结束

我在 stock.rb 文件中创建的用于控制器的方法。

    def self.find_by_ticker(ticker_symbol)
    where(ticker: ticker_symbol).first
    end

最后，我的视图文件 (_lookup.html.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>
<% end %>


<div id="stock-lookup-errors"></div>

</div>

我有一条到“stocks#search”的路线，但是当我使用这个搜索栏时，我没有得到任何结果。搜索图标似乎什么也没做。但是，当我转到我的 URL/search_stocks?Stock="enter stock name present in your database here" 时，我会得到结果，并且它会呈现部分查找。如何让我的实际搜索栏正常工作？

Answer 1

Solias，当您使用带有远程选项的表单时，Unobtrusive Javascript 驱动程序将控制提交行为（默认为 AJAX 提交，请参阅documentation for form_tag method），因此控制器操作需要以正确的内容进行响应。

首先，动作必须正确响应请求中指定的格式：

def search
  if params[:stock]
    @stock = Stock.find_by_ticker(params[:stock])
  end

  # This will require a JS view by the same name as the action,
  # in which we can put javascript logic to display the results.
  respond_to(&:js)
end

然后，在 app/views/.../search.js.erb 中（注意文件扩展名，作为 Javascript 文档）：

<% if @stock %>
  $("#stock-lookup-results").replaceWith("<%= j render 'stock_lookup_results', stock: @stock %>");
  $("#stock-lookup-errors").replaceWith('');
<% else %>
  $("#stock-lookup-results").replaceWith("");
  $("#stock-lookup-errors").replaceWith('Stock was not found');
<% end %>

您可以将结果分离为另一个部分，app/views/.../_stock_lookup_results.html.erb：

<strong>Symbol:</strong> <%= stock.ticker %>
<strong>Name:</strong> <%= stock.name %>
<strong>Price:</strong> <%= stock.price %>

最后，在 app/views/.../_lookup.html.erb 中，由于您不再在操作上呈现它，因此可以只设置 div 以用于库存结果。

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

  <div id="stock-lookup-results" class="well results-block"></div>

  <div id="stock-lookup-errors"></div>

</div>

有了这个，搜索栏将很好地处理 AJAX 请求，而无需尝试呈现您已经拥有表单的相同部分。