爲什麼此代碼使用.replaceWith而不是.html

下面的代碼來自我在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(); 
});

來源

2015-11-01 dwilbank

正如你提到的，好像整個表單替換爲查找結果。這是讓頁面感覺互動而不重新加載整個頁面的設計選擇。我個人不會那樣做，因爲它限制了多個隨後的查找。但是，這種方法可以用來通過交互式邏輯引導用戶。

在用結果替換另一個元素方面，只需創建另一個元素並將其插入到表單之後很容易。

來源

2015-11-01 19:34:13

有一條線將窗體上的偵聽器重置，因此可以再次使用......這是我想知道的不必要的複雜性的一部分 – dwilbank

爲什麼此代碼使用.replaceWith而不是.html

回答

相關問題