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>

我有一条通往＆＃34; stock＃search＆＃34;但是当我使用这个搜索栏时，我得不到任何结果。搜索图标似乎什么都不做。但是，当我转到我的URL / search_stocks？Stock =＆＃34;输入数据库中存在的股票名称＆＃34;我得到结果并且它使查找部分呈现。如何让我的实际搜索栏运行？

Answer 1

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

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

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请求，而不会尝试渲染相同的部分，你已经拥有了表单。

rails搜索栏无法正常工作

1 个答案: