刷新一个div与轨道阿贾克斯(refreshing a div with ajax in rails

我有一个待办事项一类应用的，在其中具有P个ID =他们ARE DIV任务“的任务_” + <％= task.id％> subtasks.I有我的项目的每一个节目页创建一个新的子任务的形式。

要明白这里，这是我使用的代码

其项目的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) %>');

我想，当我创建一个子任务应该得到呈现，而无需刷新我的page.But某种程度上它不工作看到这儿过得日志它看起来是正确的，但没有在浏览器似乎是工作。

这里是轨道的控制台日志的图片后，我点击Save子任务

这是UI现在的样子

Answer 1:

有可能是一套这里的问题：

1. 其网址是您的Ajax ping命令？
2. 是您的create方法实际上创建记录？
3. 是create.js.erb加载？

---

阿贾克斯

下面是关于Ajax的低下来 -

Rails的作品通过HTTP“请求” 。 你发送一个“请求”您的应用程序时，它都会相对应的数据在请求返回数据

这意味着，如果你想添加新的数据到你的页面（而不刷新），你需要以某种方式发送一个请求（阿贾克斯）

阿贾克斯基本的Javascript像个伪浏览器; 以您的名义（异步）向服务器发送一个请求，让您回电数据及追加到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的建设，在阿贾克斯 ，但我们需要知道它会被查验哪条路线。 您需要向我们展示了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实例变量的部分。 我不认为你可以做到这一点（可能是错误的）。 你需要调用一个绝对路径的部分，并通过实例var当成对象

文章来源: refreshing a div with ajax in rails