为什么此代码使用.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

回答

相关问题