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

Question

我正在进行股票申请，基本上用户需要输入股票代码，在完成ajax调用后，它将返回包含价格，股票代码和名称的实例变量。它也会在搜索栏的正下方呈现。

这是UI的图片

这是模型

<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

当我把puts @ 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 %>

您将需要将$('body').html更改为应用程序中的某个相关选择器。

希望这有帮助。