ページ全体がajax [rails]でも投稿されました

Question

私がやっていることはかなりシンプルでなければなりません。リクエストがhttpならばすべてのレコードを表示し、それがajaxだったら日付間でrecrodsを得るページがあります。

index.js.erb

respond_to :html, :js 
    def index 
    if request.xhr? 
     respond_to do |format| 
     @bookings = current_user.booking_providers.where(visit_end_date:  params[:start_date]..params[:end_date]) 
     format.js 
     end 
    else 
     @bookings = current_user.booking_providers 
    end 

、ここで：こちらのページは

これはindex.html.erb

<h1>Jobs History</h1> 
<hr> 
<div class="form-inline"> 
    <div class="col-md-12"> 
    <div class="col-md-4"> 
     <%= label_tag(:start_date) %> 
    <div class='input-group date' id='datetimepicker2'> 
     <%= text_field_tag :start_date , "", {class:'form-control'} %> 
     <span class="input-group-addon"> 
         <span class="glyphicon glyphicon-calendar"></span> 
        </span> 
    </div> 
     </div> 
    <div class="col-md-4"> 
     <%= label_tag(:end_date) %> 
    <div class='input-group date' id='datetimepicker1'> 
     <%= text_field_tag :end_date , "", {class:'form-control'} %> 
     <span class="input-group-addon"> 
         <span class="glyphicon glyphicon-calendar"></span> 
        </span> 
    </div> 
     </div> 
    <a id="searchBtn" class="btn btn-skin btn-md" href="#">Search</a> 
    </div> 
</div> 
<div id="items_grid" > 
<%= render partial: 'histories', locals: {bookings: @bookings} %> 
</div> 


<script> 
    $('#datetimepicker1').datetimepicker(); 
    $('#datetimepicker2').datetimepicker(); 
    $('a#searchBtn').click(function(){ 
    $.ajax({ 
     url: "<%= provider_history_index_path %>", 
     type: "GET", 
     data: {start_date: $('#start_date').val(), end_date: $('#end_date').val()}, 
     success: function(resp){ } 
    }); 
    }); 

</script> 

かなり正常な右、ここでコントローラをあるがどのように見えるか

$("#items_grid").html("<%= escape_javascript(render partial: 'histories', locals: { bookings: @bookings}) %>"); 

問題は、日付を入力して検索をクリックすると、ajax新しいレコードを部分的にレンダリングしますが、すぐにインデックスが呼び出され、新しいレコードを上書きする全面ポストバックが発生します。 わからない

Answer 1

、ケース誰かに似た問題を抱えている

理由は、私はAJAX呼び出しを行うことができるように提出傍受したためですが、私フォームが正常に転記されたときのデフォルトの動作を妨げていませんでした。 すべてのjQueryクリックハンドラがイベントを受け取ります。イベントのpreventDefault（）を呼び出します。

$('a#searchBtn').click(function(evt){ /* <--- the event object is passed to your handler by jQuery */ 
    evt.preventDefault(); /* <--- stop it from performing its normal behavior */ 

    $.ajax({ 
    url: "<%= provider_history_index_path %>", 
    type: "GET", 
    data: {start_date: $('#start_date').val(), end_date: $('#end_date').val()}, 
    success: function(resp){ } 
    }); 
}); 

Answer 2

インデックスとAjaxコールのルートを分ける必要があります。代わりに、if request.xhr?ブロックに何かをレンダリングして返さなければなりません。 GET provider_history_index_pathインデックスアクションが呼び出されているとき。

Railsは "Convention over Configuration"を使用しているため、Railsのコントローラは有効なルートに対応する名前のビューを自動的にレンダリングします。

あなたの場合、Railsはindex.html.erbをレンダリングします。

関連スレッド：Rails checkbox AJAX call, don't want to render anything私はredditのユーザーjemmingerからの回答を得ました