如何在Rails中的ruby中更新index.html.erb中的數據？

Question

我創建了一個有關產品的應用程序，該應用程序具有name ， price和description 。 在index.html.erb中 ，我想向每個文本框添加文本框，然后單擊“編輯”鏈接可以編輯，不需要進入/ products / id / edit。

如何編輯產品數據？

    <% @products.each do |product| %>
      <tr>
        <form action="/products/<%= product.id %>" class="edit_person_<%= product.id %>" id="edit_person_<%= product.id %>" method="post">
          <input name="_method" type="hidden" value="patch" />
          <input name="authenticity_token" type="hidden" value="NrOp5bsjoLRuK8IW5+dQEYjKGUJDe7TQoZVvq95Wteg=" />
          <td><input id="product_name" name="product[name]" type="text" value="<%= product.name %>" /><br /></td>
          <td><input id="product_price" name="product[price]" type="text" value="<%= product.price %>" /><br /></td>
          <td><input id="product_descr" name="product[descr]" type="text" value="<%= product.descr %>" /><br /></td>
          <td><input name="commit<%= product.id %>" type="submit" value="edit" /></td>
        </form>
      </tr>
    <% end %>

Answer 1

如果要更新數據而不重新加載edit.html.erb文件，則需要使用AJAX。 下面，我將向您展示如何在一個領域中做到這一點，您可以自己承擔。

<input id="product_price" name="product[price]" type="text" value="<%= product.price %>" />

在您的js.erb文件中，您可以編寫：

$("#product_price").focusout(function() {
    var productPrice = $(this).val();
    $.ajax({
        url: "/products/<%= product.id %>/edit",
        type: "POST",
        data: { product_price: productPrice}, // same way, other attributes
        success: function() {
            console.log("The result successfully came back from ther server.");
            // Now, here you can show a notice to the user that he has successfully update the record without reloading the page.
        }
    });
});