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

请求控制器中的参数

 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

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

控制器

使用其他操作设置要使用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 += "<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。但是你必须将它视为一个独立的动作，就像在rails中的任何其他动作一样。唯一的区别是您如何调用该操作（ajax）以及如何回复该操作（js）。

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

1 个答案:

控制器

表格