刷新DIV与阿贾克斯在轨 [英] refreshing a div with ajax in rails

问题描述

我有一个待办事项一种应用程序，在那里他们ARE DIV任务这是p ID =_任务+＆LT;％= task.id％> subtasks.I有一个形式，在我的项目的每一个显示页面创建一个新的子任务。

I have a todo kind of app,where in their are div tasks which have p id="task_"+<%=task.id%> subtasks.I have a form for creating a new subtask at every show page of my project.

要明白这里。这是我现在用的是code

To understand this here is the code that i am using

项目它的show.html.erb

Its the show.html.erb of project

<% 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%>

那么他们是局部的任务

Then their is partial for task

   <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>

最后，下面是部分的子任务

Finally here is the partial for subtask

     <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>

下面是我的子任务控制器上创建方法

Here is my subtask controller create method

         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文件

and here is the create.js.erb file for the ajax call

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

我想，当我创建一个子任务，它应该得到无刷新我page.But某种程度上它不工作here.I看到记录它看起来是正确的渲染，但没有在浏览器似乎是工作。

I want that when i create a subtask it should get rendered without refreshing my page.But somehow its not working here.I saw the log it looks correct,but nothing on the browser seems to be working.

下面是铁轨的控制台日志的形象后，我点击保存子任务

Here is the image of the console log of rails after i click on save of subtasks

这是用户界面现在怎么看

This is how the ui looks now

推荐答案

有可能是一系列问题在这里：

There could be a set of issues here:

1. 在哪个URL是你的Ajax侦测？
2. 是创建方法实际上创造了纪录？
3. 是 create.js.erb 加载？

1. Which URL is your Ajax pinging?
2. Is your create method actually creating a record?
3. Is create.js.erb loading?

阿贾克斯

下面是关于Ajax的低下来 -

Here's the low-down on Ajax -

导轨通过 HTTP请求工作。你发送一个请求您的应用程序时，它都会返回该请求相应的数据资料

Rails works via HTTP "requests". Every time you send a "request" to your application, it returns data corresponding to the data in that request

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

This means if you want to append new data to your page (without refreshing), you need to send a request somehow (Ajax)

阿贾克斯基本的Javascript像个伪浏览器;发送您的名义（异步）的请求到服务器，让你回电话的数据和放大器;其附加到DOM

Ajax is basically Javascript acting like a pseudo-browser; sending a request to the server on your behalf (asynchronously), allowing you to call back data & append it to the 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 通话

You're using Rails build-in Ajax, but we need to know which route it will be pinging. You need to show us which URL the Ajax is sending data to. I think part of your issue may be with the task.subtasks.build call

创建

您创建方法可重构一点：

#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

如果你的创建方法工作，问题可能在于你的JS：

If your create method is working, the problem may lie with your JS:

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

部分的问题是你要发送的 @subtask 实例变量的部分。我不认为你可以做到这一点（可能是错误的）。你需要调用一个绝对路径的部分，并通过实例var当成对象

Part of the issue is you're sending the @subtask instance variable to a partial. I don't think you can do that (might be wrong). You need to call an absolute path for the partial, and pass the instance var as an object

这篇关于刷新DIV与阿贾克斯在轨的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！