1

Rails のフォームの選択メニューに新しいオプションを動的に追加する簡単な解決策があるかどうかは誰にもわかりませんか?

Dynamic Forms railscast ( http://railscasts.com/episodes/403-dynamic-forms ) は、私が探しているものではない別の選択メニューで行われた選択に基づいて、2 番目の選択メニューを動的にフィルタリングすることに重点を置いています。フォームに選択メニューが 1 つしかなく、フォームに新しいオプションを追加できるソリューションを探しています。

ソリューションは、ネストされたモデル フォーム railscast ( http://railscasts.com/episodes/196-nested-model-form-revised )で触れたものと似ていると思いますが、その例では、値の前にフォームを送信する必要があります。データベースで更新されます。ユーザーが新しい選択メニュー オプションを追加し、送信する前にフォームの残りの部分を続行できるようにしたいと考えています。

この段階では、選択メニューではなくテキスト フィールドを使用する railscast jquery オートコンプリート ソリューションの使用も避けたいと思います。

現在、選択メニューの横に「新規追加」ボタンがあるソリューションが表示されます。ボタンをクリックするとモーダルが開き、ユーザーが新しい選択メニュー オプションを入力して保存 (データベースを更新) できるようになり、モーダルが閉じてフォームが更新されます。既存のエレガントなソリューションがすでに存在するかどうか疑問に思っています。

どんな助けでも大歓迎です。

ありがとう。

アップデート：

これを実装するためのコードはまだ作成していませんが、これが私のフォームです。

<%= simple_form_for @other, :html => { :class => 'form-horizontal' } do |f| %>  
<fieldset>
  <%= f.error_notification %>           
  <%= f.association :other_type, :include_blank => false %>      
  <%= f.input :cost%>
  <%= f.input :invoice %>             
  <%= f.input :notes, :input_html => {:class => "row-fluid"} %>
<%= f.error :base %>
<div id="eze_form_actions" class="form-actions">
  <%= f.submit nil, :class => 'btn btn-primary' %>
  <%= link_to 'Cancel', others_path, :class => 'btn' %>
</div>
</fieldset>    
<% end %>
4

1 に答える 1

1

私はカテゴリ用の CMS でこれと同様のことを行いました。ユーザーは簡単に新しいカテゴリを追加でき、サーバーに POST します。サーバーは HTML で応答し (パーシャルを介してレンダリング)、それをチェックボックスのセットに挿入します。これを目的に合わせて簡単に複製できます。

これを機能させるには、フォーム、エンドポイント、およびいくつかの JavaScript が必要です。

形

フォームに何が含まれるかはわかりませんが、通常のフォーム ヘルパーを使用し、フォームが に設定されていることを確認してremote: trueください。

終点

エンドポイントはパーシャルをレンダリングする必要があります。パーシャルには .. の html のみが含まれている必要があります。これを文字列にレンダリングし、フロントエンドに戻して追加します。

def endpoint
  # create your new model with the params
  @model = Model.create(some: attribute)
  if @model.errors.empty and @model.save
    render json: { html: render_to_string(partial: "path/to/partial", locals: { model: @model })
  end
end

** JavaScript **

$(form)
  .bind('ajax:success', function(data, status) {
    $(select).append(status.html)
  })

status.html は次のようになるはずな<option>...</option>ので、select に追加するだけです。

これが意味をなさない場合はお知らせください。お役に立てば幸いです。

于 2013-03-25T16:37:44.630 に答える