1

Rails でビルドされた todo/タスク リスト タイプのアプリがあります。

カテゴリ名の下にそれぞれのタスクを含むカテゴリのリストがあります。

各タスクの横にチェックボックスがあり、クリックすると、その特定のタスクのフォームが送信され、タスクが完了または未完了になるように更新されます。これを行うためのjQuery関数があります：

$(function(){
  $('input:checkbox').on('click', function(){
    $(this).parents('form').submit();
  });
});

私のフォームは次のようになります(HAMLで):

- form_class = task.complete? ? "edit_task complete" : "edit_task"

= form_for task, remote: true, html: {:class => form_class } do |f|
  = f.check_box :complete
  = f.label :complete, task.name
  = link_to task_path(task.id), remote: true, method: :delete, class: "delete-task" do
    %i.icon-remove.pull-right

出力 HTML は次のとおりです。

<form accept-charset="UTF-8" action="/tasks/338" class="edit_task" data-remote="true" id="edit_task_338" method="post">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓">
<input name="_method" type="hidden" value="put">
<input name="authenticity_token" type="hidden" value="q7bvSGPr1IDf1p2/SKsssbdiQj+NBWmg/C6zPB3x+jM=">
</div>
<input name="task[complete]" type="hidden" value="0">
<input checked="checked" id="task_complete" name="task[complete]" type="checkbox" value="1">
<label class="338" for="task_complete" id="task-label">another task</label>
<a href="/tasks/338" class="delete-task" data-method="delete" data-remote="true" rel="nofollow">
<i class="icon-remove pull-right"></i></a>
</form>

問題は、特定のタスクのフォームを見つける代わりに、任意のチェックボックスをクリックすると、ページの最初のタスクのみが選択され、切り替えられることです。

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

ありがとう

4

3 に答える 3

3

Blenderが提案したように、closestの代わりにを使用してみてくださいparents。

$('input:checkbox').click(function(e){
  $(this).closest('form').submit();
});
于 2013-03-09T22:50:27.947 に答える
0

私はそれをすべて試しましたが、どれもうまくいきませんでした。タスクのIDをラベルに追加し、チェックボックスを次のように入力することで、最終的にそれを理解しました。

= f.check_box :complete, id: "task-#{task.id}"
= f.label :name, task.name, for: "task-#{task.id}"

これで、適切なフォームを送信できるようになりました。ご入力いただきありがとうございます。

于 2013-03-18T01:36:48.883 に答える
0

これは正しい動作です。これを使用しているためinput:checkbox、ページ上のチェックボックスタイプの入力要素を参照します。したがって、jQuery セットにはすべてのフォームのすべてのチェック ボックスが含まれているため、submit()一度に複数のフォームを処理できないため、最初のチェック ボックスのみが処理されるようです。

代わりに、次のいずれかを試してください。1 つは、parent() の代わりに$.parent('form')を使用します。

$(function(){
  $('input:checkbox').on('click', function(){
    $(this).parent('form').submit(); //get my immediate parent which is type form.
  });
});

またはフォームのIDをチェックボックスに追加し、その親を見つけるために使用します。これは、入力がフォーム内でより深くネストされている場合に適しています。これは、parent() が機能しないことを意味します。

<input data-form="edit_task_338" checked="checked" id="task_complete" name="task[complete]" type="checkbox" value="1">

//then
$(function(){
      $('input:checkbox').on('click', function(){
        //use the data-attr to retrive the form's id i.e edit_task_338
        $('form[id='+ $(this).data('form')) +']').submit(); 
      });
    });

それらはさらにいくつかの方法ですが、別の HTML 設定が必要でした。

于 2013-03-09T22:57:56.423 に答える