如何使用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）。