[英]Rails: Populate inputs from a select tag in form
我正在运行Rails 4和Ruby 2。
我正在创建一个应用程序,您可以在每餐中跟踪卡路里和大量营养素。
我要添加一个“用餐偏爱”页面,用户可以在其中添加他们一直吃的饭。 我已经通过一个收藏夹做到了:布尔迁移。
当用户创建一顿新饭时,我想向他们显示一个他们已经保存的收藏夹的下拉框,例如current_user.meals.where(favourite: true)
。
当他们从下拉列表中单击自己的收藏夹之一时,我希望这些信息以表格的形式填充蛋白质,碳水化合物和脂肪。
做这个的最好方式是什么?
MealsController:
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
新/编辑餐单
<%= 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 %>
谢谢!
您可以使用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' }
请参阅Rails Controller概述:呈现JSON 。
选择下拉列表的实现将取决于其用途。 是否用于将下拉菜单中的项目与正在创建的对象相关联? 在这种情况下,请查看@ jordan-davis的其他答案。 还是仅仅是告知用户先前做出的选择? 在这种情况下,我建议options_for_select
。 有很多内置的帮助器供选择:
您将使用集合选择填充下拉列表
<%= collection_select :user, :meal, Meal.all, :id, :name, checked: meal.name.first %>
这段代码不会被剪切和粘贴,但这只是为了展示想法。 之后,您将必须使用jQuery来获取餐ID,然后使用该ID填充其余信息。 您将从以下方面开始:
$(".dropdown-menu li a").click(function(){
$(this).parents(".dropdown-menu:first").dropdown('toggle')
var selectedMeal = $(this).text();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.