js + rails - 无法让这个表单工作 [英] js + rails - can't get this form working

问题描述

我从 this 改编了这个 js，所以问题，但我以前从未使用过 js 并且不确定我在这里做错了什么.很可能这是一个简单的修复，但非常感谢您的帮助.

I adapted this js from this SO question, but I've never used js before and not sure what I'm doing wrong here. It's very possible it's a simple fix, but your help is hugely appreciated.

目标:当用户添加一个班级时，他们输入名称、类型和学生人数.当 :number_of_students 发生变化时，js 启动并显示适当数量的 forms_for student(示例我正在工作).

The goal: When a user adds a class, they put in the name, the type, and the number of students. When :number_of_students changes, the js kicks in and shows the appropriate number of forms_for student (the example i'm working from).

问题:总的来说，它是有效的 - 视图有效，并且提交的数据到了正确的位置.但是标题的第一位(性别标签的名称)最初出现，即使它们不应该出现(它们都是带有 id="nos_header" 的表的一部分.当我更改 :number_of_students 然而，不是显示行，而是标题消失，没有其他任何内容出现.

The problem: Overall it's working - the view works, and submitted data goes to the right place. But the first bit of the header (name of gender labels) show up initially, even though they shouldn't (they're all part of the table with id="nos_header". When I change the :number_of_students however, instead of rows showing up, the header disappears and nothing else appears.

我在哪里:

这是 student_groups.js 中的 javascript:

here's the javascript in student_groups.js:

    var row_i = 0;

function emptyRow() {
   row_i++;
   this.obj = $("<tr></tr>");
   this.obj.append('<td><input type="text" size="5" value="' + row_i + '"/></td>');
   this.obj.append('<td><input type="text" size="5" name="Student name' + row_i + '"     id="ss_name' + row_i + '""/></td>');
   this.obj.append('<td><input type="text" size="5" name="Gender' + row_i + '" id="ss_gender' + row_i + '""/></td>');
}

function refresh(new_count) {
//how many applications we have drawed now ?
    console.log("New count= " + new_count);
    if(new_count > 0) {
        $('#nos_header').show();
    }
    else {
        $('#nos_header').hide();
    }
var old_count = parseInt($('tbody').children().length);
    console.log("Old count= " + old_count);
//the difference, we need to add or remove ?
var rows_difference = parseInt(new_count) - old_count;
 console.log("Rows diff= " + rows_difference);
//if we have rows to add
if (rows_difference > 0)
  {
    for(var i = 0; i < rows_difference; i++)
    $('tbody').append((new emptyRow()).obj);
  }
else if (rows_difference < 0)//we need to remove rows ..
  {
    var index_start = old_count + rows_difference + 1; 
    console.log("Index start= "+index_start);
    $('tr:gt('+index_start+')').remove();
    row_i += rows_difference;
  }
}

$(document).ready(function () {
    $('#nos').change(function () {
        refresh( $(this).val() );
    })
});

和 student_groups/new.html.erb(为时髦的格式道歉，这是在我的 textmate 文件中阅读的最佳方式):

and student_groups/new.html.erb (apologies for the funky formatting, this is how it's best to read in my textmate file):

<%= form_for(@student_group) do |f| %>

  <p>
    <span class="form_field"><%= f.text_field :name, placeholder: "The name of this group" %></span>
  is a/an 
    <%= f.select :type_of_group, [["select a group type", ""], "young learners class (0-6)", "primary class (7-12)", "secondary class (13-17)", "adult class (18+)", "children's sport team", "adult's sport team"] %> 
  and there are 
    <span id="nos" class="dropdown"><%= f.select :number_of_students, (0..60) %></span>
  members.
  </p>


  <table id="nos_header">
      <tbody>    
        <tr>
          <td><%= f.label :name, "Student name:" %></td>
              <td><%= f.label :gender, "Gender:" %></td>
        </tr>
      <%= f.fields_for :students do |builder| %>
        <%= render 'students/form', :f => builder %>
      <% end %>
      </tbody>
    </table>

<%= f.submit "Submit", :class => 'big_button round unselectable' %>

最后students/_form.html.erb:

<tr>
  <td id="ss_name" class="form_field"><%= f.text_field :name %></td>
  <td id="ss_gender" class="dropdown"><%= f.select :gender, ['Female', 'Male', 'Transgender'] %></td>   
</tr>

推荐答案

有几个错误，我已经更正了.下面是相应的代码以及 Fiddle 的实时工作副本.

there were few mistakes , i have corrected it.below is the respective code as well the live working copy from Fiddle.

JS 小提琴

JS 代码:

$(document).ready(function () {
  //hide table by default
  $('#nos_header').hide ();

  $('#nos').change(function () {
    var opt=$('#nos option:selected');
      //alert(opt.text());
    refresh(opt.text());
  })
});

快乐编码:)

这篇关于js + rails - 无法让这个表单工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！