如何使用ajax和jquery顯示基於用戶輸入的選擇

Question

將下面看作是自行車出租。有人填寫表格並獲得分配給他們的自行車，他們可以租借一段時間。

我遇到的問題是我試圖向他們提交表單時想要租用自行車的人提供什麼樣的自行車。以下是我使用ajax的嘗試。我沒有錯誤，但我的選擇沒有更新。

下面

def new 
    @bikes = Bike.available_based_on_request_date(params[:Borrow_date], params[:Return_date]) 
    @new_request = Request.new 
    end 

請求的控制器方法創建下面方法（與暫時的解決辦法，即重新加載有大約可用性警告的形式。）在請求控制器

def create 
    @request = Request.new(request_params) 
    available_bikes = @request.new_request(current_user.id) 
    if (available_bikes >= @request.number_of_bikes_wanted) && @request.save 
     redirect_to root_path 
    else 
     flash[:warning] = "You have requested more bikes than available. There are only #{available_bikes} bikes available" 
     redirect_to new_request_url 
    end 
    end 

PARAMS

def request_params 
    params.require(:request).permit(:Borrow_time, :Borrow_date, 
            :Return_date, :Return_time, 
            :number_of_bikes_wanted, bike_ids: []) 
    end 

new.html.erb查看

<div class="form" align = "center"> 
    <%= render 'form.js.erb' %> 
    </div> 

_form.js.erb下面

<script type="text/javascript"> 
$(document).ready(function() { 
    $('.my-date').on('change', function() { 
    var data = {} 

    $('.my-date').each(function() { 
     if($(this).val()) { 
     data[$(this).attr("id")] = $(this).val(); 
     } 
    }); 

    if(Object.keys(data).length > 1) { 
     $.ajax({ 
     type: "POST", 
     url: <%= new_request_path %>, 
     data: data 
     }); 
    } 
    }); 
}); 

var options = ""; 

<% @bikes.each do |bike| %> 
options += "<option value='<%= bike.id %>'><%= bike.name %></option>" 
<% end %> 

$('#request_number_of_bikes_wanted').html(options); 
</script> 


<div class="block-it" align=center> 
<br> 
<%= form_for @new_request do |request| %> 

<%= request.label :Borrow_date, 'Borrow on' %> 
<%= request.date_field :Borrow_date, id: 'Borrow_date', class: 'my-date', min: Date.today, :required => true %> 

<%= request.label :Borrow_time, 'Borrow at' %> 
<%= request.time_field :Borrow_time, value: '10:00', min: '9:00 AM', max: '4:30 PM', default: '10:00 AM', :ignore_date => true, :required => true %> 
<br><br> 
<%= request.label :Return_date, 'Return On' %> 
<%= request.date_field :Return_date, id: 'Return_date', class: 'my-date', min: Date.today, :required => true %> 

<%= request.label :Return_time, 'Return at' %> 
<%= request.time_field :Return_time, value: '10:00', min: '9:00 AM', max: '4:30 PM', default: '10:00 AM', :ignore_date => true, :required => true %> 
<br><br> 
<br><br> 
<%= request.label :NumberOfBikesWanted, 'Number of bikes' %> 
<%= request.select :number_of_bikes_wanted, %w(select_bike), :required => true %> 
<br> 
<%= request.submit 'Submit' %> 
<%= request.submit 'Reset', :type => 'reset' %> 
<% end %> 
<br> 
</div> 

Answer 1

有你的代碼一兩個主要問題：

控制器

使用不同的操作設置，你將調用端點與阿賈克斯，所以不是這個：

def new 
    @bikes = Bike.available_based_on_request_date(params[:Borrow_date], params[:Return_date]) 
    @new_request = Request.new 
end 

試試這個：

def bikes 
    @bikes = Bike.available_based_on_request_date(params[:Borrow_date], params[:Return_date]) 

def new 
    @new_request = Request.new 
end 

如果你想保留REST的路線，然後創建一個新的控制器和控制器中使用index行動。

形式

此代碼：

var options = ""; 

<% @bikes.each do |bike| %> 
    options += "<option value='<%= bike.id %>'><%= bike.name %></option>" 
<% end %> 

$('#request_number_of_bikes_wanted').html(options); 

不屬於這裏，它必須從文件中刪除，而是把它放在一個名爲bikes.js.erb新的文件;也將您的表格重命名爲_form.html.erb。

和更新您的Ajax調用使用新的路線：

$.ajax({ 
    type: "POST", 
    url: <%= bikes_path %>, 
    data: data 
}); 

---

你想設置什麼是新的端點，但不是返回html，它會返回一個js。但是你必須把它當作一個獨立的動作，就像任何其他的動作一樣。唯一的區別是您如何調用該操作（ajax）以及如何響應該操作（js）。