HAML i AJAX - problem

Potrzebna pomoc
1

Cześć,

mam problem z dynamicznym ładowaniem contentu w moim projekcie, który jest częścią kursu na udemy.
Request kończy się sukcesem, ale niestety treść nie ładuje się na stronie.

https://s30.postimg.org/mw7yfgdzl/Virtual_Box_Debian_Rails_03_01_2017_22_40_29.png

Kod HAML:

#stock-lookup
  %h3 Search for Stocks
  = form_tag search_stocks_path, remote: true, method: :get, id: 'stock-lookup-form' do
    .form-group.row.no-padding.text-center.col-md-12
      .col-md-10
        = text_field_tag :stock, params[:stock], placeholder: "Stock ticker symbol", autofocus: true, class: 'form-control search-box input-lg'
      .col-md-2
        = button_tag(type: :submit, class: 'btn btn-lg btn-success') do 
          %i.fa.fa-search Look up a stock
  - if @stock
    #stock-lookup-results.well.results-block
      %strong Symbol:
      = @stock.ticker
      %strong Name:
      = @stock.name
      %strong Price:
      = @stock.price
  #stock-lookup-errors

Stocks.js:

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();
});

StocksController:

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

Byłbym wdzięczny za jakąkolwiek wskazówkę i pomoc. W programie kursu nie ma HAML’a i instruktorzy nie byli mi w stanie pomóc.

3

“Kod HAML:” to jest partial ‘lookup’ ? Jeśli tak to pokaż jeszcze widok z my_portfolio.

4

Tak dokładnie to jest ten partial.

my_portfolio:

= render 'stocks/lookup'

i to wszystko :wink:

5

Zapomniałem wspomnieć, że używam Rails 5. Może to jest problem?

6

Instruktorzy nie byli w stanie pomóc ze względu na HAMLa czy w ogólnie nie byli w stanie pomóc ? W przeglądarce będziesz miał znaczniki HTML a nie HAMLowe.

7

powiedzieli tylko, że to na pewno błąd HAML’a i żebym sprawdził czy klasy i id są poprawne. Zrobiłem to i nie znalazłem żadnego błędu. Przesyłam kody do porównania

Kod html.erb z udemy:

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

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

Mój kod HTML:

<div id='stock-lookup'>
            <h3>Search for Stocks</h3>
            <form id="stock-lookup-form" action="/search_stocks" accept-charset="UTF-8" data-remote="true" method="get"><input name="utf8" type="hidden" value="&#x2713;" />
              <div class='form-group row no-padding text-center col-md-12'>
                <div class='col-md-10'>
                  <input type="text" name="stock" id="stock" placeholder="Stock ticker symbol" autofocus="autofocus" class="form-control search-box input-lg" />
                </div>
                <div class='col-md-2'>
                  <button name="button" type="submit" class="btn btn-lg btn-success"><i class='fa fa-search'>Look up a stock</i>
                  </button>
                </div>
              </div>
            </form>
            <div id='stock-lookup-errors'></div>
          </div>
8

eh… nawet tego nie skomentuje.

W Ruby on Rails 5 jeżeli korzystasz z turbolinków musisz mieć na uwadze fakt, że $(document).ready(function(){ uruchamiany jest tylko przy pierwszym załadowaniu / odświeżeniu strony. Przy przejściu na podstrony uruchamiany jest event turbolinks:load to może być jedną z przyczyn.

9

Rozumiem dzięki :wink: to jak mogę to rozwiązać? :slight_smile:

10 
$(document).on('turbolinks:load', function() {
  // ...
});
11

niestety nie pomogło :disappointed:

12

spróbuje bez spacji między ajax: a error

13

Dzięki działa :smiley: