Question

我有一个todo类型的应用程序，在他们的div任务中有p id =“task _”+＆lt;％= task.id％＆gt; subasks。我有一个表单，用于在我的项目的每个显示页面上创建一个新的子任务。

这里要理解的是我正在使用的代码

它是项目的show.html.erb

<% provide(:title,'ToDoProject') %>
<div class="container-fluid">
<div class="row-fluid">
    <div class="user span9 default-skin">
        <ul class="myul">
            <% if @project.tasks.any? %>
            <%=render :partial=> @project %>
            <%end%>

        </ul>   
    </div>

    <div class="span3" id="rightcolumn">
        <p><%=@project.name %></p>
        <p><%=link_to 'Add Task',new_project_task_path(@project) %></p>

    </div>

</div>

这是部分项目

<% project.tasks.each do |task| %>
<%=render :partial=>task %>

<%end%>

然后他们是部分任务

   <div class="span5 tasks" id='tasks_<%=task.id %>'>
    <div class="addtaskdiv" id="addtaskdiv_<%=task.id %>">
        <p><b><%=task.taskname %></b>
        <%=link_to 'edit name',edit_task_path(task) %></p>  
        <% task.subtasks.each do |subtask| %>

            <%=render :partial=>subtask %>
            <!--
                <p class="subtask" data-toggle="modal" data-target="#myModal"><%=subtask.name %>
                <a data-id='<%=subtask.id %>' href="#" style="float:right;"><i class="fa fa-pencil-square-o"></i></a></p-->
        <%end%>

        <%=render 'layouts/modal' %>
    </div>
    <div class="subtaskform" id="subtask_form_<%=task.id %>" style="width:218px;margin:0 2px 0px 3px;">

        <%= form_for [task, task.subtasks.build],:remote => true do |f| %>

            <%= f.text_area :name,rows:'3',cols:'3'%>

            <%= f.submit "save",class:'btn btn-success' %>
            <a data-id='<%=task.id %>' href="#"><i class="fa fa-times fa-lg"></i></a>

        <% end %>

    </div>



    <p class="addcard" id="addcard_<%=task.id%>"><a href="#" data-id='<%= task.id %>' id='add_card_<%= task.id %>'>Add a card...</a></p>
</div>

最后这里是子任务的部分

     <div class="dropdown">
                <a data-id='<%=subtask.id %>' href="#" style="float:right;" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-pencil-square-o" style="margin-right:10px;margin-top:10px;"></i></a>
                <p class="subtask" data-toggle="modal" data-target="#myModal"><%=subtask.name %></p>


                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                </ul>
            </div>

这是我的子任务控制器创建方法

         def create
    @task=Task.find(params[:task_id])
    @project=@task.project
    @subtask=@task.subtasks.create(params[:subtask])
    respond_to do |format|
        if @subtask.save
            format.html{redirect_to @project}
            format.js

            flash[:success]="Task created successfully"
        else
            render new
        end
    end
end

这里是ajax调用的create.js.erb文件

       $('#adddtaskdiv_'+ <%=@task.id %>).append('<%= escape_javascript(render :partial=>@subtask) %>');

我希望当我创建一个子任务时，它应该在不刷新我的页面的情况下呈现。但不知何故它在这里不起作用。我看到它看起来正确的日志，但浏览器上似乎没有任何工作。

点击保存子任务后，这是rails的控制台日志的图像 enter image description here

这就是ui现在的样子

enter image description here

Answer 1

这里可能存在一系列问题：

您的Ajax ping是哪个URL？
您的create方法是否实际创建了记录？
create.js.erb正在加载吗？

<强>的Ajax

这是Ajax的低调 -

Rails通过HTTP "requests"工作。每次向应用程序发送“请求”时，它都会返回与该请求中的数据相对应的数据

这意味着如果您想要将新数据附加到您的页面（无需刷新），您需要以某种方式发送请求（Ajax）

Ajax基本上就像是一个伪浏览器的Javascript;代表您向服务器发送请求（异步），允许您回拨数据＆amp;将它附加到DOM

<强>网址

    <%= form_for [task, task.subtasks.build],:remote => true do |f| %>

        <%= f.text_area :name,rows:'3',cols:'3'%>

        <%= f.submit "save",class:'btn btn-success' %>
        <a data-id='<%=task.id %>' href="#"><i class="fa fa-times fa-lg"></i></a>

    <% end %>

您正在使用Rails build-in Ajax，但我们需要知道它将要ping的路由。您需要向我们显示Ajax将数据发送到哪个URL。我认为的部分内容可能与task.subtasks.build来电

创建

您的create方法可以稍微重构一下：

#app/controllers/subtasks_controller.rb def create @task= Task.find(params[:task_id]) @project = @task.project @subtask = @task.subtasks.new(subtask_params) @subtask.save respond_to do |format| format.html{redirect_to @project, flash[:success] = "Task created successfully"} format.js # -> you can't send the Flash object through xhr end end private def subtask_params params.require(:subtask).permit(:name) end #app/models/subtask.rb Class SubTask < ActiveRecord::Base validates :name, presence: true # -> Causes forms to fail gracefully end

创建JS

如果您的create方法有效，问题可能在于您的JS：

#app/views/subtasks/create.js.erb $('#addtaskdiv_'+ <%=@task.id %>).append('<%=j render partial: "subtasks/partial_name", object: @subtask %>');

部分问题是您将@subtask实例变量发送到部分。我认为你不能这样做（可能是错的）。您需要为partial和pass the instance var as an object
调用绝对路径

用rails中的ajax刷新div

1 个答案: