0

jQueryを使用して動的に追加された日付フィールドを含むフォームがあります。送信されたパラメーターを処理するには、それらのフィールドの数をカウントする必要があります。次に、コントローラー内でその数に基づいてループを作成できます。

application.js

$(function() {
  var scntDiv = $('#foo');
  var i = $('#foo div.bar').size();

  $(document).on('click', '#addField', function() {
    $('<div class="bar"><input type="text" id="start" name="start_'+ i +'"><input type="text" id="end" name="end_'+ i +'"></div>').appendTo(scntDiv);
    i++;
    return false;
  });

n個の入力を追加したとすると、html出力は次のようになります。

<input type="text" id="start" name="start_1">
<input type="text" id="end" name="end_1">
.
.
.
<input type="text" id="start" name="start_n">
<input type="text" id="end" name="end_n">

私の質問は、コントローラー内のその「n」にアクセスする方法です。

すべての日付範囲を1つの配列に格納してから、各日付に基づいて複数のレコードを作成する必要があります。

4

2 に答える 2

2

実装方法に近い別のオプションnested_attributes（そこに表示される最も美しいJavaScriptではありませんが、精神は得られます）：

$(function() {
  var $scntDiv = $('#foo');

  $('#addField').click( function(){
    var index = $scntDiv.find( '.bar' ).size();
    $(
      '<div class="bar">' +
        '<input type="text" class="start" name="ranges[' + index + '][start]">' +
        '<input type="text" class="end" name="ranges[' + index + '][end]">' +
      '</div>'
     ).appendTo( $scntDiv );
     return false;
  });
});

これにより、次のようなハッシュが作成されます。

>> params[:ranges]
=> {"0" => {"start" => "a_date_string", "end" => "another_date_string"}, 
    "1" => {"start" => "a_date_string", "end" => "another_date_string"} }

そうすれば、一括割り当てを使用しても、このハッシュを簡単に処理できます。

class MyClass
  def ranges= ranges
    ranges.each do |*,attributes|
      # whatever logic pleases you, self.ranges.build( attributes ) for instance
    end
  end
end

ただし、この方法を使用する場合は、実行するロジックが非常に複雑な場合を除いて、直接nested_attributesを使用することをお勧めします。ネストされた属性には、子レコードの自動インスタンス化、レコード削除管理、必要に応じて一部の属性の自動拒否などの多くの機能が付属しています。これらはフォームヘルパーとうまく連携しますfields_for。これはレールに固有なので、わざわざ車輪の再発明を行う必要があります。 ？

于 2013-03-20T20:33:58.197 に答える
0

これは役に立ちます。

$(function() {
  var scntDiv = $('#foo');

  $('#addField').click(function(){
    $('<div class="bar"><input type="text" id="start" name="start[]"><input type="text" id="end" name="end[]"></div>').appendTo(scntDiv);
    return false;
  });
});

これにより、以下のようなパラメータが送信されます。例えば

"start"=>["1", "2", "3"], "end"=>["11", "22", "33"]
于 2013-03-20T20:00:18.150 に答える