0

私は次のことをしようとしています:

1)チェックボックスがチェックTime of Arrivalされると、チェックボックスが動的にチェックされた時間でボックスが更新されます。送信ボタンなどを押したくありません。AJAX経由で動的にする必要があります。 ここに画像の説明を入力

私の現在のコードは次のようになります。

<table border="1">
    <tr>
     <td><b>Present</b></td>
     <td><b>Student ID</b></td>
     <td><b>First Name</b></td>
     <td><b>Last Name</b></td>
     <td><b>Time of Arrival</b></td>
    </tr>
<% @register.student_registers.each do |student_register| %>
  <tr>
      <td><%= check_box_tag "student_registers_ids[#{student_register.id}]",  student_register.id, student_register.present?%></td>
      <td><%= student_register.student.university_id%></td>
      <td><%= student_register.student.first_name.titlecase%></td>
      <td><%= student_register.student.last_name.titlecase%></td>
      <td><%= student_register.time_of_arrival %></td>
  </tr>
  <% end %>
</table>

2) 私がやりたいもう 1 つのことは、ボタンPresentを押さなくても、チェックボックスがチェックされるとすぐに、データベース内のレコードを更新することです。Submitこれは、model#showページではなく、ページで行われmodel#editます。

助言がありますか？

編集：

コードを変更しましたが、まだ機能していません...

<table border="1">
    <tr>
     <td><b>Present</b></td>
     <td><b>Student ID</b></td>
     <td><b>First Name</b></td>
     <td><b>Last Name</b></td>
     <td><b>Time of Arrival</b></td>
    </tr>
  <% form_tag :remote => true %>
<% @register.student_registers.each do |student_register| %>
  <tr>
      <td><%= check_box_tag "student_registers_ids[#{student_register.id}]",
                            student_register.id, student_register.present?,
                            :disabled => false,
                            :onclick => 'popup  ' %></td>
      <td><%= label_tag 'UniversityId', student_register.student.university_id%></td>
      <td><%= label_tag 'FirstName', student_register.student.first_name.titlecase%></td>
      <td><%= label_tag 'LastName', student_register.student.last_name.titlecase%></td>
      <td><%= label_tag student_register.time_of_arrival, nil, :class => 'TimeOfArrival'%>    </td>
  </tr>
  <% end %>

</table>
<%= submit_tag "Save", :confirm => "You sure", :onclick => 'alert("Test")'%>

誰か助けてください....

4

1 に答える 1

0

これが私がすることです：

  1. すべてのチェックボックス入力に共通の CSS クラスを指定します (後で jQuery セレクターとして使用します)。
  2. 「到着時刻」セルに<span>...</span>学生 ID (例: ) をエンコードする ID を持つ空の要素を作成します。'toa_1234'
  3. jQuery.change()を使用$.ajax()して、メッセージをサーバーに送信します。
  4. 対応するコントローラーまたはアクションを作成して、AJAX POST を処理し、記録された (サーバー側の) 時間を返します。
  5. AJAX が成功すると、記録されたサーバー時間を表示し、チェックボックスを無効にします (再度クリックできないようにします)。

HTML/ERB:

<td><%= check_box_tag "student_registers_ids[#{student_register.id}]",
  student_register.id, false,
  :class => 'student_present' %></td>
<td><%= student_register.student.university_id%></td>
<td><%= student_register.student.first_name.titlecase%></td>
<td><%= student_register.student.last_name.titlecase%></td>
<td><%= content_tag :span, student_register.time_of_arrival,
  :id => "toa_#{student_register.student.id}" %></td>

JS/コーヒースクリプト:

$ ->
  $('input[type="checkbox"].student_present').change (e) ->
    checkbox = $(this)
    student_id = checkbox.val()
    $.ajax
      url: '/register/present'
      method: 'POST'
      dataType: 'json'
      data:
        student_id: student_id
      success: (data) ->
        $("span#toa_#{student_id}").html(data['toa'])
        checkbox.attr 'disabled', true

コントローラー/アクション:

def present
  student_id = params['student_id']
  # TODO: mark student present and save in database
  recorded_toa = Time.now # TODO replace with actual time
  render json: { student_id: student_id, toa: recorded_toa.strftime('%I:%M %P') }
end
于 2013-03-14T07:45:51.723 に答える