js + rails - 無法得到這個表格工作

我改編了這個js從this SO問題，但我從來沒有用過js之前，不知道我在這裏做錯了什麼。這很可能是一個簡單的修復，但你的幫助非常感謝。js + rails - 無法得到這個表格工作

目標：當用戶添加一個類時，他們輸入名字，類型和學生人數。當:number_of_students發生變化時，js開始並顯示適當數量的forms_for學生（我工作的example）。

問題：總體來說，它的工作 - 視圖工作，並提交數據去正確的地方。但是頭部的第一位（性別標籤的名稱）最初顯示出來，即使它們不應該（它們都是id =「nos_header」的表格的一部分）但是，當我更改:number_of_students時，起來，頭就會消失，並出現沒有別的

我在哪裏：

這裏是在student_groups.js的JavaScript：

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（道歉時髦的格式，這是如何最好在我的文本文件中閱讀）：

<%= 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>

來源

2013-07-02 dax

你說，「當我改變：number_of_students然而，不是行的顯示出來，頭消失，沒有別的東西出現「，但你的小提琴工作正常，我猜想。 – dreamweiver

啊對不起，這不是我的小提琴，那是我用的一個例子 – dax

哦好吧好吧。你可以在小提琴中更新你的場景，它會更容易理解你的問題，並修復它:) – dreamweiver

有一些錯誤，我已經糾正it.below是各自的代碼，以及從小提琴現場工作副本。

JS FIDDLE

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()); 
    }) 
});

編碼快樂:)

來源

2013-07-02 14:06:11 dreamweiver

js + rails - 無法得到這個表格工作

回答

相關問題