Question

我有一个用于创建列表的表单。我想让用户能够为将来保存的新项目创建新表单。我想要一个“+”按钮来添加通过JavaScript创建一个新表单。它在我的测试用户上工作得很好，但事情变得混乱，所以我让新用户重新开始。当我试图加载我的新列表页面时，我得到了他的：

undefined method `id' for nil:NilClass

具体来说，它指向我的JavaScript中的这一点：

$(this).parents(':eq(1)').append("<%= escape_javascript render partial: 'shared/user_item_form', locals: {f: @f, category_id: @category.id} %>");

我需要将这些变量传递给任何将要呈现的新表单，但这些变量依赖于从服务器或数据库传递的数据。尽管我声明$(document).ready。

，似乎它正试图首先运行我的JavaScript

这是完整的表格。

第26行是这个问题开始的地方，我在那里声明了一些类变量，以便它们在下面的javascript中到达。

第43行是我渲染第一个部分的地方，也就是当用户按下“+”时将重复的部分。当用户按下该按钮时，我希望在其下方弹出相同的确切形式。

https://pastebin.com/ieLYfYm4

当谈到组合JS和Rails时，我是一个真正的菜鸟，而且我在项目的这一部分中一直在苦苦挣扎。我真的不明白首先加载什么或我的JS应该去哪里。到目前为止，我一起入侵的东西似乎工作正常。如果现在这个问题，不知道为什么它在任何时候都在工作。也许我的浏览器在缓存中存储了一些阻止引发此错误的东西？

代码，如果你不能看看pastbin

<div class="new-list">
    <h2>New List</h2>
    <%= form_for @list, url: list_path, html: {class: "form-signin"} do |f| %>
        <%= f.text_field :name, placeholder: "Name your list (optional)" %>
        <!-- Category -->
        <div class="categories">
            <% current_user.categories.each do |category| %>
                <h3 class="category">
                  <%= category.name %>
                </h3>
                <!-- Items -->  
                <div class="dropdown-button" data-toggle="collapse" data-target="#<%= category.name %>">
                    <span class="glyphicon glyphicon-chevron-down"></span>
                </div>
                <!-- Dropdown div -->
                <div id="<%= category.name %>" class="collapse">
                    <div class="table-responsive">
                        <!-- User Item table -->
                        <table class="items">
                            <tr>
                                <th>Add</th>
                                <th>Name</th>
                                <th>Price</th>
                                <th>Qnty</th>
                            </tr>
                        <% category.user_items.each do |item| %>
                            <%= f.fields_for l = @list.list_items.build, index: l.id do |list_item| %>
                                <% @category = category %>
                                <% @f = f %>
                                <tr>
                                    <td><%= list_item.check_box :user_item_id, { checked: false }, item.id, nil %></td>
                                    <td><%= item.name %></td>
                                    <td><%= item.price %></td>
                                    <td><%= list_item.number_field :quantity,
                                                                                                    min: 1,
                                                                                                    class: "num"%></td>
                                </tr>
                            <% end %>
                        <% end %>
                      </table>
                    </div>
                    <h3>Create a new item here:</h3>
                    <%= render partial: 'shared/user_item_form', locals: {f: f, category_id: category.id}  %>
                    <h4><span class="glyphicon glyphicon-plus" id="add-item"></span>Add More</h4>
                </div>
            <% end %> <!-- current_user.categories -->
            <br>
            <%= f.submit "Submit" %>
        </div>
    <% end %>
</div>

<!-- dropdown button script -->
<script>
  $(document).ready(function () {
      $('.data-toggle').collapse();
      addNewItemForm();
  });

function addNewItemForm(){
  $('#add-item').click(function(){
        $(this).parents(':eq(1)').append("<%= escape_javascript render partial: 'shared/user_item_form', locals: {f: @f, category_id: @category.id} %>");
  });
}
</script>

Answer 1

问题是脚本底部的javascript函数addNewItemForm（）不会在您调用它时进行评估，但是当页面完全呈现时，当那个时刻和那个地方，当Rails尝试时评估以下字符串：<%= escape_javascript render partial: 'shared/user_item_form', locals: {f: @f, category_id: @category.id} %> @category变量超出范围且未定义。

实际上，您需要在点击带有相应参数的按钮时发出另一个服务器请求，让服务器完成工作：渲染新的部分并调用javascript来改变HTML。

您可以使用以下示例轻松完成此操作：

<%= link_to 'Add New Item', [:new, category, :items], remote: true %>

（“remote：true”将发出ajax请求。）

您将在控制器中获取URL params中的类别，并可以再次实例化它：

@category = Category.find(params[:category_id])

然后使用以下代码（new.js.erb）回复：

<%= j render 'shared/user_item_form', category_id: @category.id %>

（这只是你的行的简写）

以下是对类似示例的文档的引用：http://guides.rubyonrails.org/working_with_javascript_in_rails.html#a-simple-example

JavaScript在Rails实际设置它们之前设置要附加的部分变量

1 个答案: