Question

我正在尝试使用AJAX功能，以便在简单的待办事项列表应用程序中创建新任务。

目前列表设置如下：

<h2> TO DO </h2>
<div class="wrapper">
  <ul id="incomplete">
    <% @task.each do |f| %>
    <% if f.complete == false %>
      <div id="<%= f.id %>">
        <p class= "title"><%= f.title %></p>
        <%= form_for f, remote: true do |task| %>
          <%= task.check_box :complete, class: "check_box" %>
          <%= task.submit %>
        <% end %>
      </div>
      <% end %>
  <% end %>
  </ul>
</div>
<h2> COMPLETED </h2>
  <div class="wrapper">
    <ul id="completed">
    <% @task.each do |f| %>
    <% if f.complete == true %>
      <div id="<%= f.id %>">
         <p class="title"><%= f.title %></p>
        <%= form_for f, remote: true do |task| %>
          <%= task.check_box :complete, class: "check_box" %>
          <%= task.submit %>
        <% end %>
      </div>
      <% end %>
    <% end %>
    </ul>
  </div>
  <p id="new_link"><%= link_to "New Task", new_task_path, remote: true %></p>
  <div id="new_task">
  </div>

当按下“新任务”链接时，它会执行一个加载以下部分的js文件：

<%= form_for @task, remote: true do |f| %>
  <%= f.label :title %>
  <%= f.text_field :title %>
  <%= f.submit "Create" %>
<% end %>

我的创建方法如下：

def create
    @task = Task.new(task_params)
    @task.save


    respond_to do |format|
      format.html
      format.js
    end
  end

当我从部分表单中删除“remote：true”时，页面重置并且新任务出现在new中，但是，当我使用“remote：true”时，执行我的create.js.erb文件，DOM中没有任何改变。这是我的create.js.erb文件：

$('#incomplete').append($("#<%= @task.id %>"));
console.log("<%= @task.title %> has been saved.");

我的控制台中没有收到任何错误，并且create.js.erb上的console.log行记录到控制台，没有问题任务标题和字符串的其余部分。

我很遗憾为什么create.js.erb文件没有操纵DOM。此代码在视觉上不提供任何响应，仅提供到控制台的帖子。

使用AJAX创建方法时出现问题

0 个答案: