我从这个SO question改编了这个 js ,但我以前从未使用过 js,也不确定我在这里做错了什么。很可能这是一个简单的修复,但非常感谢您的帮助。
目标:当用户添加课程时,他们会输入名称、类型和学生人数。更改时:number_of_students
,js 会启动并显示适当数量的 forms_for student(我正在使用的示例)。
问题:总体来说它是有效的——视图有效,提交的数据到了正确的位置。但是标题的第一位(性别标签的名称)最初显示出来,即使它们不应该出现(它们都是 id="nos_header" 的表的一部分。但是当我更改:number_of_students
时,而不是显示行,标题消失,没有其他内容出现。
我在哪里:
这是中的javascript 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 文件中阅读的最佳方式):
<%= 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>