Rails：以表格形式填充來自select標簽的輸入

Question

我正在運行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 %>

謝謝！

Answer 1

您可以使用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 。 有很多內置的幫助器供選擇：

ActionView表單選項助手

Answer 2

您將使用集合選擇填充下拉列表

<%= 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();