更新rhtml文件中的变量

Question

我有一个帮助方法，通过将行数作为arguement来创建行 我想更新使用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在浏览器上运行时，＆lt;％=％＆gt;标签不再有任何意义。

为了按照您想要的方式执行您想要的操作，您的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);
   };