jQuery function works in partial but not show

Question

I have jquery code that counts the current rows in a table (and does some arithmetic) and adds them to a column. I've used this script in my _form/_partial and it works great. However, when I use the same script inside my show.html.erb (to setup the same table again) it does not work.

Here is my _form

<table id="mytable">
    <th>RowNumber</th>
    <th>header2</th>
    <th>header3</th>
    <th>header4</th>  
        <%= f.nested_fields_for :partial do |f|
          render 'partial', f: f
        end -%> 
         <caption align = "bottom"><%= link_to_add_fields "Add Field", f, :manual_iops %></caption>
</table>

_partial.html.erb

<tr>
 <td> 
   <!-- Nothing Goes Here -->   
 </td>

 <td>
  <%= f.text_field :data1 %>
 </td>

 <td>
  <%= f.text_field :data2 %>
 </td>

  <td>
  <%= f.text_field :data3 %>
 </td>

</tr>

  <script>
   $('tr').each(function(){
     var index= $('#mytable').children('tr').index($(this))
     if(index == 0){
       var position= 5;
     }
     if(index == 1){
       var position = 10;
     }
     if(index == 2){
       var position = 15;
     }
     if(index == 3){
       var position = 20;
     }
     if(index > 3){
       var position = (index-1)*10
     }
     $(this).children('td').first().html(position);
  })
</script>

Now here is what I'm trying in my show:

show.html.erb

<table id="mytable">
  <th>RowNumber</th>
  <th>header1</th>
  <th>header2</th>
  <th>header3</th>
     <% @data_sheet.partials.each do |c| %>
    <tr>
      <td></td>
      <td><%= c.data1 %></td>
      <td><%= c.data2 %></td>
      <td><%= c.data3 %></td>
    </tr>
  <script>
     $('tr').each(function(){
         var index= $('#mytable').children('tr').index($(this))
         if(index == 0){
               var position= 5;
         }
         if(index == 1){
               var position = 10;
         }
         if(index == 2){
               var position = 15;
         }
         if(index == 3){
               var position = 20;
         }
         if(index > 3){
               var position = (index-1)*10
         }
        $(this).children('td').first().html(position);
    })
  </script>
     <% end %>
</table>  

Here is an image of how my _form looks, you can see the first column has values: 5, 10, 15, 20, due to my script in partial.html.erb counting the rows and doing some + and *:

And here is my show.html.erb, which shows an empty column(it should be filled 5,10,15,20) due my issue. I am running the same script here from my partial:

So what am I doing wrong in this situation? The only thing I see different is my loop and the fact I am not rendering a partial, but I see no reason why this should effect my javascript. I'm really banging my head against the wall by this.

Answer 1

Ok, if you want to do this with ruby it's easy:

<table id="mytable">
  <th>RowNumber</th>
  <th>header1</th>
  <th>header2</th>
  <th>header3</th>

  <% @count = 5 %>  
  <% @data_sheet.partials.each do |c| %>
    <tr>
      <td><%= @count %></td>
      <td><%= c.data1 %></td>
      <td><%= c.data2 %></td>
      <td><%= c.data3 %></td>
    </tr>
  <% if @count >= 20 %>
    <% @count = @count + 10 %>
  <% else %> 
    <% @count = @count + 5 %>  
  <% end %>
</table>  

You can rewrite the if and statement as:

<% @count >= 20 ? (@count = @count + 10) : (@count = @count + 5) %>

Answer 2

EDIT:

Wow, I didn't realize you were looping that script. Are you doing that on purpose? Try changing your show to:

<table id="mytable">
  <th>RowNumber</th>
  <th>header1</th>
  <th>header2</th>
  <th>header3</th>
     <% @data_sheet.partials.each do |c| %>
    <tr>
      <td></td>
      <td><%= c.data1 %></td>
      <td><%= c.data2 %></td>
      <td><%= c.data3 %></td>
    </tr>
     <% end %>
</table>  

  <% content_for :scripts do %>
    <script>
       $(document).ready(function(){
         $('tr').each(function(){
             var index= $('#mytable').children('tr').index($(this))
             if(index == 0){
                   var position= 5;
             }
             if(index == 1){
                   var position = 10;
             }
             if(index == 2){
                   var position = 15;
             }
             if(index == 3){
                   var position = 20;
             }
             if(index > 3){
                   var position = (index-1)*10
             }
            $(this).children('td').first().html(position);
        });
      });
      </script>
   <% end %>

Old answer

The main problem is probably the script being called before the document is ready, so try wrapping in a document.ready function. Also for added precaution put it just before the </body> tag.

Try putting <%= yield :scripts %> just before your </body> tag in your application.html.erb

Now in your partial put:

  <% content_for :scripts do %>
    <script>
       $(document).ready(function(){
         $('tr').each(function(){
             var index= $('#mytable').children('tr').index($(this))
             if(index == 0){
                   var position= 5;
             }
             if(index == 1){
                   var position = 10;
             }
             if(index == 2){
                   var position = 15;
             }
             if(index == 3){
                   var position = 20;
             }
             if(index > 3){
                   var position = (index-1)*10
             }
            $(this).children('td').first().html(position);
        });
      });
      </script>
   <% end %>