如何使用ajax和jquery显示基于用户输入的选择 [英] How to display a selection based on user input using ajax and jquery
问题描述
将下面看作是自行车出租。有人填写表格并获得一辆自行车分配给他们，他们可以租借一段时间。
我遇到的问题是我试图在他们提交表格之前，向想要租用自行车的人显示哪些自行车可用。以下是我使用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] =您要求的自行车数量超过了可用数量，只有＃{available_bikes}自行车可用
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：[]）
结束
< div class =formalign =center>
<％=呈现'form.js.erb'％>
< / div>
下面的_form.js.erb
< script type =text / javascript> $（'。my-date'）。on（'change'，function（）{
var data = {} $ b（document）.ready（function（）{
$ （$（this）.val（））{
data [$（this）.attr）
$（'。my-date'）。 （id）] = $（this）.val（）;
}
}）;
if（Object.keys（data）.length> 1） {
。.ajax（{
type：POST，
url：<％= new_request_path％> ;,
data：data
}）;
}
}）;
}）;
var options =;
<％@ bikes.each do | bike | ％GT;
options + =< option value ='<％= bike.id％>'><％= bike.name％>< / option>
<％end％>
$（'＃request_number_of_bikes_wanted'）。html（options）;
< / script>
< div class =block-italign = center>
< br>
<％= form_for @new_request do | request | ％GT;
<％= request.label：借用日期，'借用于'％>
<％= request.date_field：借用日期，id：'借用日期'，class：'my-date'，min：Date.today，：required => true％>
<％= request.label：借入时间，'借用'％>
<％= request.time_field：借用时间，值：'10：00'，分钟：'9:00 AM'，最大：'4:30 PM'，默认：'10：AM AM'，： ignore_date => true，：required => true％>
< br>< br>
<％= request.label：Return_date，'返回'％>
<％= request.date_field：Return_date，id：'Return_date'，class：'my-date'，min：Date.today，：required => true％>
<％= request.label：Return_time，'返回'％>
<％= request.time_field：Return_time，值：'10：00'，min：'9:00 AM'，max：'4:30 PM'，默认：'10：AM AM'，： ignore_date => true，：required => true％>
< br>< br>
< br>< br>
<％= request.label：NumberOfBikesWanted，'自行车数量％>
<％= request.select：number_of_bikes_wanted，％w（select_bike），：required => true％>
< br>
<％= request.submit'提交'％>
<％= request.submit'重置'，：type => '重置'％>
<％end％>
< br>
< / div>
您的代码有两个主要问题：
控制器
使用不同的操作来设置您将使用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 | ％GT;
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 ）。 p>
Think of the below as a bike rental. Someone fills out a form and gets a bike assigned to them which they can rent and borrow for a certain amount of time.
The problem I am having is I am trying to show the person who wants to rent the bikes what bikes are available before they submit the form. Below is my attempt using ajax. I have no errors but also my select is not updating.
request controller methods below
def new
@bikes = Bike.available_based_on_request_date(params[:Borrow_date], params[:Return_date])
@new_request = Request.new
end
create method below (with a temporary workaround, that reloads the form with a warning about availability.)
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 in request controller
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 view
<div class="form" align = "center">
<%= render 'form.js.erb' %>
</div>
_form.js.erb below
<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>
There are a two main problems with your code:
Controller
Use a different action to set the endpoint that you will call with ajax, so instead of this:
def new
@bikes = Bike.available_based_on_request_date(params[:Borrow_date], params[:Return_date])
@new_request = Request.new
end
Try this:
def bikes
@bikes = Bike.available_based_on_request_date(params[:Borrow_date], params[:Return_date])
def new
@new_request = Request.new
end
If you want to keep REST routes, then create a new controller and use the index action within that controller.
Form
This code:
var options = "";
<% @bikes.each do |bike| %>
options += "<option value='<%= bike.id %>'><%= bike.name %></option>"
<% end %>
$('#request_number_of_bikes_wanted').html(options);
doesn't belong here, it must be deleted from your file and instead put it on a new file called bikes.js.erb; also rename your form to _form.html.erb.
And update your ajax call to use your new route:
$.ajax({
type: "POST",
url: <%= bikes_path %>,
data: data
});
What you want to setup is a new endpoint but instead of returning html, it will return a js. But you must treat it as an independent action, just as any other action in rails. The only difference is how you call that action (ajax) and how you respond to it (js).
这篇关于如何使用ajax和jquery显示基于用户输入的选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
