Rails AJAX / Spinner无法正常工作

时间:2017-06-21 10:14:47

标签: javascript ruby-on-rails ajax heroku

我的微调器显示但仅从第二次搜索出现... 当我第一次没有出现时搜索股票。这是我的回购:https://github.com/Ardzii/finance-tracker和heroku:https://finance-tracker-ardzii.herokuapp.com/

并且,所以你不必看看回购:

以下是视图:_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', spinner: true 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="glyphicon glyphicon-search"></i> Look up a stock
        <% end %>
      </div>
    </div>
    <%= render 'common/spinner' %>
    <div id='stock-lookup-results'></div>
  <% end %>
</div>

spinner partial:_spinner.html.erb

<div id="spinner" class="row col-md-12 text-center spinner" style="display: none;">
  <i class="glyphicon glyphicon-refresh glyphicon-spin"></i> Processing...
</div>

我的Javascript文件:search.js.erb

var init_stock_lookup;

init_stock_lookup = function(){

  $('#stock-lookup-form').on('ajax:before', function(event, data, status){
    show_spinner();
  });

  $('#stock-lookup-form').on('ajax:complete', function(event, data, status){
    hide_spinner();
  });

  $('#stock-lookup-form').on('ajax:success', function(event, data, status){
    $('#stock-lookup-results').html("<%= j render 'stock', {stock: @stock} %>");
  init_stock_lookup();
  });
}


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

})

它呈现的视图:_stock.html.erb

<div class="well results-block">
  <% if stock.present? %>
    <strong>Symbol:</strong> <%= stock.ticker %>
    <strong>Name:</strong> <%= stock.name %>
    <strong>Price:</strong> <%= stock.price %>
  <% else %>
    <i>Stock not found</i>
  <% end %>
</div>

我的application.js文件:

  var hide_spinner = function (){
    $("#spinner").hide();
  }

  var show_spinner = function (){
    $("#spinner").show();
  }

我不确定问题是否已经明确说明了,所以我将在此重述: 微调器仅在第一次搜索后才起作用。在第一次查找时,我没有显示微调器......

提前致谢,并照常为您提供帮助!

0 个答案:

没有答案