轨道:填充表单中选择标签的输入

Rails: Populate inputs from a select tag in form

本文关键字：标签 输入 选择 填充 表单 轨道      更新时间：2023-09-26

我正在运行Rails 4和Ruby 2。

我正在创建一个应用程序，您可以在其中跟踪您吃的每一顿饭的卡路里和宏量营养素。

我正在添加一个膳食收藏夹页面，用户可以在其中添加他们一直吃的餐点。我通过收藏夹：布尔迁移来做到这一点。

当用户创建新餐时，我想向他们展示一个下拉框，其中包含他们已经保存的收藏夹，如下所示current_user.meals.where(favourite: 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

新建/编辑餐单

<%= 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 控制器概述：渲染 JSON。

选择下拉列表的实现将取决于它的用途。 是否用于将下拉列表中的项目与正在创建的对象相关联？ 在这种情况下，请查看@jordan-戴维斯的另一个答案。 还是只是通知用户以前做出的选择？ 在这种情况下，我建议options_for_select. 有很多内置的帮助程序用于选择：

操作视图表单选项帮助程序

您将使用集合选择填充下拉列表 

<%= collection_select :user, :meal, Meal.all, :id, :name, checked: meal.name.first %>

这段代码不会剪切和粘贴，但它是为了展示这个想法。之后，您必须使用 jQuery 获取膳食 ID，然后使用它来填充其余信息。您将从大致如下的内容开始：

$(".dropdown-menu li a").click(function(){
    $(this).parents(".dropdown-menu:first").dropdown('toggle')
    var selectedMeal = $(this).text();
相关文章：