javascript - 将值从 JQuery 传递到我的模型并更新数据库

Question

我在 Register 模型中得到了一个 Students 列表，以及一个名为 StudentRegisters 的连接表。

一个Register有很多学生，一个Student可以属于多个Registers。

最初我希望能够在 register/1 或 register#show 等中标记学生在场/缺席，但是我创建了一个名为 registration，例如通过 register/1/registration 访问，在 register controller 中看起来像这样:

def registration
  @studentregister = StudentRegister.find_all_by_register_id(params[:id])
end

这是页面的截图:

计划是，学生刷卡，在文本字段中读取，然后在 Student 表中查找值，即 Student.find_by_card_id'，如果学生存在并且存在于当前表中，则选中present复选框并在Time of Arrival字段中显示当前时间，最后将两个更改的属性保存在StudentRegister` 模型，以便保存他们的出勤率。如果用户不存在则什么也不会发生，或者如果学生存在于数据库中但不存在于当前表中，可能会显示一条消息，或者只是忽略它。

我已经尝试了很多让表格显示和更新的方法，目前每一行本身就是一个表单，并且附加了一个隐藏的提交按钮，该按钮通过复选框的 激活onClick 函数。

自己看看:

<table border="1">
  <%= text_field_tag 'Card_ID',nil,  :autofocus => true %>
      <tr><td>Present</td>
        <td>University ID</td>
        <td>First Name</td>
        <td>Last Name</td>
        <td>Time of Arrival</td>
      </tr>
  <tr>
   <% @studentregister.each do |t| %>
<%= simple_form_for t do |streg| %>
      <td><%= streg.check_box :present, :onChange => "submit()", :class => 'student_present'%>
        <%= streg.submit :style => 'display: none' %></td>
            <td><%= content_tag :span, Student.find(t.student_id).university_id, :id => "#{t.student_id}"%></td>
            <td><%= streg.label Student.find(t.student_id).first_name %></td>
            <td><%= streg.label Student.find(t.student_id).last_name %></td>
            <td><%= content_tag :span, t.time_of_arrival, :id => "toa_#{t.student.id}" %>     </td>
             </tr>
    <% end %>
    <% end %>
</table>

我也试着让数据显示出来，所以我没有使用 Simple_Form 的 label 方法，而是使用了 content_tag 来给每一行一个 ID(感谢以前回答的问题)。不确定这是否正确，但我的源代码如下所示:

<table border="1">
  <input autofocus="autofocus" id="Card_ID" name="Card_ID" type="text" />
      <tr><td>Present</td>
        <td>University ID</td>
        <td>First Name</td>
        <td>Last Name</td>
        <td>Time of Arrival</td>
      </tr>
  <tr>
<form accept-charset="UTF-8" action="/student_registers/14" class="simple_form edit_student_register" id="edit_student_register_14" method="post" novalidate="novalidate">    
<div style="margin:0;padding:0;display:inline">
 <input name="utf8" type="hidden" value="&#x2713;" /><input name="_method" type="hidden" value="put" />
<input name="authenticity_token" type="hidden" value="c8B0JGs4ZLVILa4a4r4PJJrD/zFcLCDhTLscBKHbFeE=" /></div>
      <td><input name="student_register[present]" type="hidden" value="0" />
<input class="student_present" id="student_register_present" name="student_register[present]" onChange="submit()" type="checkbox" value="1" />
        <input name="commit" style="display: none" type="submit" value="Update Student register" /></td>
            <td><span id="3">w122341434</span></td>
            <td><label class="string optional control-label" for="student_register_Michael">Michael</label></td>
            <td><label class="string optional control-label" for="student_register_Jones">Jones</label></td>
            <td><span id="toa_3"></span> </td>
             </tr></form>
<form accept-charset="UTF-8" action="/student_registers/15" class="simple_form edit_student_register" id="edit_student_register_15" method="post" novalidate="novalidate">  
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="&#x2713;" /><input name="_method" type="hidden" value="put" />
<input name="authenticity_token" type="hidden" value="c8B0JGs4ZLVILa4a4r4PJJrD/zFcLCDhTLscBKHbFeE=" /></div>
      <td><input name="student_register[present]" type="hidden" value="0" />
<input class="student_present" id="student_register_present" name="student_register[present]" onChange="submit()" type="checkbox" value="1" />
        <input name="commit" style="display: none" type="submit" value="Update Student register" /></td>
            <td><span id="7">w678941512</span></td>
            <td><label class="string optional control-label" for="student_register_Stewie">Stewie</label></td>
            <td><label class="string optional control-label" for="student_register_Lee">Lee</label></td>
            <td><span id="toa_7"></span> </td>

我还创建了一些 JQuery 以测试它是如何工作的，但是每当我得到一个要选中的复选框时，它不会提交表单，并且每当我得到时间保存在 Time Arrival 字段，然后提交表单，它不存储那个时间。这是为什么？

<script>
    $(function() {
        $("input[name=Card_ID]").keydown(function(e) {
            var id;
            if (e.which === 13) {
            id = this.value;
            alert("That"); //Just to see that it works
            $('#toa_'+id).text('2001-01-01 14:13:46 UTC'); 
//Sets the time for the row which as the toa_id that was entered in the checkbox 
(Remember this is just a test to see how it works, in reality the Student ID should be   checked, not the form ID)
            $('form#edit_student_register_14 input[type="checkbox"]').attr('checked', true);
            alert("This");
        $('form#edit_student_register_14').submit();
        }
    })});

Answer 1

首先认为您应该做的是确保您的表单数据正确登陆您的服务器页面，而不是错误的 URL，这可以通过将服务器端收到的请求输出到网页来完成。一旦完成，您就可以在服务器端管理表单数据并继续数据库操作过程。

puts params[:blah]
abort

取自:From an action, get a post variable, output to page, then halt execution

完成此操作后，您应该能够在服务器端进行处理并使用相同的方式继续跟踪。

这是使用 Chrome 浏览器调试网络查询的一种方法，您可以看到传出查询的列表，您可以通过单击 Preserve Log upon Navigation 来节省网络流量 :

Chrome Network Debugging

希望对您有所帮助。