更新rhtml文件中的变量

Question

我有一个帮助方法，通过传递行数作为争论来创建行，我想更新使用javascript传递给助手的参数"i“。我该怎么做呢？我试着在底部使用这个脚本。有人能告诉我一个更好的方法吗？非常感谢

辅助法

    def injection_form(i)
    n=0
    if i.blank?
        i = 1 
    end
    table = '<tr>'
    until (n == i) do 
        table <<'<td> '
        table <<    "#{text_field_tag "injection_#{i}[antigen_number]",{}, :size => 3}"
        table <<'</td>'
        table <<'<td>'
        table <<    "#{ text_field_tag "injection_#{i}[animal_number]", {}, :size => 4}"
        table <<'</td>'
        table <<'</tr>'
        table <<'<tr>'
        n += 1
    end
    table << '</tr>'
    return table
end

视图

 <table class='animal-events'>
    <tr>
        <th> Antigen Number </th>
        <th> Animal Number </th>
        <td><button onclick="addRow(i);"> + </button></td>
    </tr>
   <% form_tag "recombinant_antibody/add_injections" do %>      
          <%= injection_form(i) %>
              <%=submit_tag "make"%>
  </table>
   <%end%>

脚本

    <script>
      function addRow(number) {         
           $('form').replaceChild('<%= injection_form('+number.toString()+')') 
        }
     </script>

Answer 1

这不像你想的那样。您的Ruby助手在页面加载并呈现到其发送给浏览器的HTML文件时运行。当Javascript在浏览器上运行时，<%= %>标记就不再有任何意义了。

为了按照您想做的方式做您想做的事情，Javascript必须生成您想要的确切的HTML并将其插入DOM。所以你会有这样的东西：

<script>
  function addRow(number) {
    var nameTag = 'injection_' + number;
    var html = '<tr><td><input id="' + nameTag + '[antigen_number]" name="' + nameTag + '[antigen_number]" size="3" type="text" value="" /></td>';
    html += '<td><input id="' + nameTag + '[animal_number]" name="' + nameTag + '[animal_number]" size="4" type="text" value="" /></td>';
    html += '</td></tr>'
    $('form').append(html);
  }
</script>

我不确定这是否会产生你所需要的确切的HTML --你应该检查已经以你的形式出现的元素--但这是基本的想法。

Answer 2

这是另一种古老的方法。最后我用了这个。如果有人知道如何在js中使用助手方法，请发布。

    function addRow(number){

var table = document.getElementById('test');

var nameTag = 'injection_' + number;

var ag_cell = document.createElement("td");

var animal_cell = document.createElement("td");

var ag_input = document.createElement("input");
    ag_input.setAttribute("type", "text");
    ag_input.setAttribute("id", nameTag + '_antigen_number' );
    ag_input.setAttribute("value", "");
    ag_input.setAttribute("name", nameTag + '[antigen_number]');
    ag_input.setAttribute("size", 3);
var animal_input = document.createElement("input");
    animal_input.setAttribute("type", "text");
    animal_input.setAttribute("id", nameTag + '_animal_number' );
    animal_input.setAttribute("value", "");
    animal_input.setAttribute("name", nameTag + '[animal_number]');
    animal_input.setAttribute("size", 4);
var ag_form = ag_cell.appendChild(ag_input);    

var animal_form = animal_cell.appendChild(animal_input);

var row = document.createElement("tr");
    row.appendChild(ag_cell).appendChild(ag_form);
    row.appendChild(animal_cell).appendChild(animal_form);
    table.appendChild(row);
   };