2015-11-01 2 views
0

Код ниже приведен из учебника, которое я делаю на Udemy. Любая идея, почему она заменяет всю форму .replaceWith вместо того, чтобы просто вставить ответ AJAX в свою выделенную область?Почему этот код использует .replaceWith вместо просто .html

Кажется, излишне сложно. Что мне не хватает?

Так вот форма, которая отправляет запрос AJAX

<div id="stock-lookup"> 

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

    <%= render 'common/spinner' %> 

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

и вот JS, который обрабатывает его

var init_stock_lookup; 

init_stock_lookup = function() { 
    ... 
    $('#stock-lookup-form').on('ajax:success', function(evt, data, stat) { 
     $('#stock-lookup').replaceWith(data); 
     init_stock_lookup(); 
    }); 

    $('#stock-lookup-form').on('ajax:error', function(evt, xhr, stat, err) { 
     hide_spinner(); 
     $('#stock-lookup-results').replaceWith(''); 
     $('#stock-lookup-errors').replaceWith('Stock was not found.'); 
    }); 

}; 

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

ответ

0

Как вы предлагаете, это, кажется, как и вся форма заменяется на результат поиска , Это выбор дизайна, чтобы сделать страницу интерактивной без перезагрузки всей страницы. Я лично не сделал бы этого так, поскольку он ограничивал несколько последующих поисков. Однако этот подход можно использовать для управления пользователем с помощью интерактивной логики.

Что касается замены другого элемента на результат, легко создать другой элемент и вставить его после формы.

+0

есть линия, которая сбрасывает слушателя на форме, чтобы его можно было использовать снова ... которая является частью ненужной сложности, о которой мне было интересно – dwilbank

Смежные вопросы