Javascript Rails:从表单中的select标记填充输入
我正在运行Rails 4和Ruby 2 我正在创建一个应用程序,你可以通过每顿饭跟踪你的卡路里和大量营养素 我正在添加一个膳食收藏夹页面,用户可以在其中添加他们一直吃的膳食。我通过一个最喜欢的方法做到了这一点:布尔迁移 当用户创建一份新的套餐时,我想向他们显示一个他们已经保存的收藏夹的下拉框,例如Javascript Rails:从表单中的select标记填充输入,javascript,jquery,ruby-on-rails,ruby,ruby-on-rails-4,Javascript,Jquery,Ruby On Rails,Ruby,Ruby On Rails 4,我正在运行Rails 4和Ruby 2 我正在创建一个应用程序,你可以通过每顿饭跟踪你的卡路里和大量营养素 我正在添加一个膳食收藏夹页面,用户可以在其中添加他们一直吃的膳食。我通过一个最喜欢的方法做到了这一点:布尔迁移 当用户创建一份新的套餐时,我想向他们显示一个他们已经保存的收藏夹的下拉框,例如current\u user.fines.where(favorite:true) 当他们从下拉列表中点击他们最喜欢的食物时,我希望这些信息能够填充表格中的蛋白质、碳水化合物和脂肪输入 最好的方法是什么
current\u user.fines.where(favorite:true)
当他们从下拉列表中点击他们最喜欢的食物时,我希望这些信息能够填充表格中的蛋白质、碳水化合物和脂肪输入
最好的方法是什么
测量控制器:
class MealsController < ApplicationController
.
.
.
def new
@meal = current_user.meals.build
end
def create
@meal = current_user.meals.build(meal_params)
respond_to do |format|
if @meal.save
format.html { redirect_to root_path, notice: 'Meal was successfully added.' }
else
format.html { render action: 'new', notice: 'Meal was not added.' }
end
format.js
end
end
.
.
.
private
def set_meal
@meal = Meal.find(params[:id])
end
.
.
.
end
class MealsController
新建/编辑餐单
<%= form_for(@meal) do |f| %>
.
.
.
<div class="field inline">
<%= f.label :protein %> (g)<br>
<%= f.text_field :protein %>
</div>
<div class="field inline middle">
Carbs (g)<br>
<%= f.text_field :carbohydrates %>
</div>
<div class="field inline right">
<%= f.label :fats %> (g)<br>
<%= f.text_field :fats %>
</div>
<div class="field actions">
<%= f.check_box :favourite, class: "favourites" %> Add to Favourites?
</div>
<div class="actions">
<%= f.submit "Save", class: "btn btn-large" %>
<% if current_page?(edit_meal_path(@meal)) %>
<%= link_to "Delete", @meal, class: "btn btn-large", method: :delete, data: { confirm: "Are you sure?" } %>
<% end %>
</div>
<% end %>
.
.
.
(g)
碳水化合物(g)
(g)
添加到收藏夹?
谢谢 您可以使用JavaScript/jQuery来实现:
$(document).ready(function() {
bindFavoriteMeal();
});
function bindFavoriteMeal() {
$('#favorite_meal_select').change(function() {
var mealId = $(this).val();
var url = "/meals/" + mealId
$.getJSON(url, function(data) {
$.each(data, function(key, value) {
var field = $("#" + key);
if (field.length) {
field.val(value);
}
});
});
});
}
用餐控制器中的show
操作必须响应JSON,并且需要确保表单ID与返回的JSON键匹配。JSON可能看起来像:
{ 'name': 'Mustart Salmon', 'protein': 40, 'carbs': 8, 'other_stuff': 'some_value' }
看
选择下拉列表的实现将取决于它的用途。是否用于将下拉列表中的项目与正在创建的对象关联?在这种情况下,请查看@jordan davis的另一个答案。或者仅仅是告知用户之前所做的选择?在这种情况下,我建议选择选项。有许多用于选择的内置帮助程序:
您可以在下拉列表中填充
使用jQuery来检测所选的膳食何时发生变化,并将其绑定到一个函数,该函数将填充所需的字段?下拉代码是什么样子的?非常感谢,我想在下拉列表中向当前用户展示他们“最喜欢”的饭菜。他们通过收藏夹:布尔迁移将一顿饭添加到收藏夹中。所以我想知道是否有一些选择下拉列表,在那里你可以添加一个范围来显示所有喜欢的食物。然后,当您单击某顿饭时,新操作中其他数据类型的饭将填充有喜爱的饭的输入。这有意义吗?听起来像是一个来自于集合的options\u的作业,用于选择。
<%= collection_select :user, :meal, Meal.all, :id, :name, checked: meal.name.first %>
$(".dropdown-menu li a").click(function(){
$(this).parents(".dropdown-menu:first").dropdown('toggle')
var selectedMeal = $(this).text();