如何使用ajax和jquery基于用户输入显示选择

想想下面的自行车租赁。 有人填写表格并获得分配给他们的自行车，他们可以租用和借用一段时间。

我遇到的问题是我试图向那些想要租用自行车的人展示在提交表格之前可用的自行车。 以下是我使用ajax的尝试。 我没有错误，但我的选择没有更新。

请求控制器方法如下

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

下面的create方法（使用临时解决方法，重新加载表单并提供有关可用性的警告。）

  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 

请求控制器中的参数

  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视图

下面是_form.js.erb

  $(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: , data: data }); } }); }); var options = "";  options += "<option value=''>"  $('#request_number_of_bikes_wanted').html(options);  
 
    true %>   true, :required => true %> 

   true %>   true, :required => true %> 

 

   true %> 
   'reset' %>  
  

Answer 1

您的代码存在两个主要问题：

调节器

使用不同的操作来设置将使用ajax调用的端点，因此不是这样：

 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 += "<%= bike.name %>" <% 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 。 但是你必须将它视为一个独立的动作，就像在rails中的任何其他动作一样。 唯一的区别是你如何调用该动作（ ajax ）以及如何响应它（ js ）。