AJAX Rails – Requête apparemment perdue – Aucun résultat d’interface utilisateur

J’ai eu quelques problèmes avec une requête JavaScript plus tôt et la solution fournie semble avoir résolu le problème (puisque je ne reçois pas d’erreur de la console du navigateur), mais mon application n’affiche rien dans l’interface utilisateur. Voici comment la demande est traitée par le serveur:

Started GET "/search_stocks?utf8=%E2%9C%93&stock=GOOG&button=" for 127.0.0.1 at 2017-06-19 12:50:13 +0200 Processing by StocksController#search as JS Parameters: {"utf8"=>"✓", "stock"=>"GOOG", "button"=>""} User Load (0.3ms) SELECT "users".* FROM "users" WHERE "users"."id" = ? ORDER BY "users"."id" ASC LIMIT ? [["id", 1], ["LIMIT", 1]] Stock Load (0.4ms) SELECT "stocks".* FROM "stocks" WHERE "stocks"."ticker" = ? ORDER BY "stocks"."id" ASC LIMIT ? [["ticker", "GOOG"], ["LIMIT", 1]] Rendered stocks/_lookup.html.erb (1084.6ms) [cache miss] Completed 200 OK in 3002ms (Views: 1114.2ms | ActiveRecord: 0.8ms) 

Voici mon interface utilisateur (c’est un partiel):

 

Search for stocks

Look up a stock
Symbol: Name: Price:

Voici les méthodes:

 class Stock < ApplicationRecord def self.find_by_ticker(ticker_symbol) where(ticker: ticker_symbol).first end def self.new_from_lookup(ticker_symbol) looked_up_stock = StockQuote::Stock.quote(ticker_symbol) return nil unless looked_up_stock.name new_stock = new(ticker: looked_up_stock.symbol, name: looked_up_stock.name) new_stock.last_price = new_stock.price new_stock end def price closing_price = StockQuote::Stock.quote(ticker).close return "#{closing_price} (Closing)" if closing_price opening_price = StockQuote::Stock.quote(ticker).open return "#{opening_price} (Opening)" if opening_price 'Unavailable' end end 

le controlle:

 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 #render json: @stock render partial: 'lookup' else render status: :not_found, nothing: true end end end 

et le JavaScript (AJAX):

 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(); }) } $(document).ready(function() { init_stock_lookup(); }) 

OK, sur cette base, si je commente le “rendu partiel: ‘recherche” dans mon contrôleur, décommentez celui “render json: @stock” et gérez directement la requête via mon navigateur: je reçois les informations recherchées pour. Cela signifie que la gemme et la requête fonctionnent correctement. Une fois que j’essaie de gérer la demande via AJAX, je ne reçois rien … Quelqu’un a une solution? J’ai l’impression que je gère mal le JavaScript ou qu’il me manque peut-être un bijou. Quoi qu’il en soit, voici mon fichier gem:

 source 'https://rubygems.org' git_source(:github) do |repo_name| repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/") "https://github.com/#{repo_name}.git" end # Bundle edge Rails instead: gem 'rails', github: 'rails/rails' gem 'rails', '~> 5.1.1' gem 'devise' gem 'twitter-bootstrap-rails' gem 'devise-bootstrap-views' gem 'sprockets-rails', :require => 'sprockets/railtie' gem 'jquery-rails' gem 'jquery-turbolinks', '~> 2.1' gem 'stock_quote' # Use Puma as the app server gem 'puma', '~> 3.7' # Use SCSS for stylesheets gem 'sass-rails', '~> 5.0' # Use Uglifier as compressor for JavaScript assets gem 'uglifier', '>= 1.3.0' # See https://github.com/rails/execjs#readme for more supported runtimes # gem 'therubyracer', platforms: :ruby # Use CoffeeScript for .coffee assets and views gem 'coffee-rails', '~> 4.2' # Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks gem 'turbolinks', '~> 5' # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder gem 'jbuilder', '~> 2.5' # Use Redis adapter to run Action Cable in production # gem 'redis', '~> 3.0' # Use ActiveModel has_secure_password # gem 'bcrypt', '~> 3.1.7' # Use Capistrano for deployment # gem 'capistrano-rails', group: :development group :development, :test do gem 'sqlite3' # Call 'byebug' anywhere in the code to stop execution and get a debugger console gem 'byebug', platforms: [:mri, :mingw, :x64_mingw] # Adds support for Capybara system testing and selenium driver gem 'capybara', '~> 2.13' gem 'selenium-webdriver' end group :development do # Access an IRB console on exception pages or by using  anywhere in the code. gem 'web-console', '>= 3.3.0' gem 'listen', '>= 3.0.5', ' 2.0.0' end # Windows does not include zoneinfo files, so bundle the tzinfo-data gem gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby] group :production do gem 'pg' gem 'rails_12factor' end 

Et voici un lien vers mon référentiel: https://github.com/Ardzii/finance-tracker

Vous utilisez remote: true , vous devriez utiliser la méthode respond_to pour gérer ajax. Ceci est un exemple, vous pouvez faire étape par étape:

  1. Supprimer app/assets/javascripts/stocks.js
  2. Editer la search actions dans app/controllers/stocks_controller.rb

     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.html format.js end end 
  3. Éditez app/views/stocks/_lookup.html.erb

     

    Search for stocks

    <%= form_tag search_stocks_path, remote: true, method: :get, id: 'stock-lookup-form' do %>
    <%= text_field_tag :stock, params[:stock], placeholder: "Stock ticker symbol", autofocus: true, class: 'form-control search-box input-lg' %>
    <%= button_tag(type: :submit, class: "btn btn-lg btn-success") do %> Look up a stock <% end %>
    <% end %>
  4. Créez app/views/stocks/_stock.html.erb

     <% if stock.present? %> Symbol: <%= stock.ticker %> Name: <%= stock.name %> Price: <%= stock.price %> <% else %> Stock not found <% end %> 
  5. Créer app/views/stocks/search.js.erb

     $("#stock-lookup-results").html("<%= j render 'stock', {stock: @stock} %>"); 

Terminé!!!