使用ajax在rails中刷新div

Question

我有一個待辦事項類型的應用程序，在他們的任務中有p id =「task _」+ <％= task.id％> 子任務。我有一個創建在我的項目的每個展示頁面都有一個新的子任務。

要理解這一點這裏要說的是，我使用

其項目

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

這裏的show.html.erb代碼部分項目

<% 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) %>'); 

我想，當我創建一個子任務應該得到仁德紅色沒有刷新我的頁面。但不知何故它不在這裏工作。我看到它看起來正確的日誌，但瀏覽器上沒有任何東西似乎工作。

這裏是軌道的控制檯日誌後我點擊保存子任務

這是對UI現在

Answer 1

怎麼看起來有可能是一系列問題的圖像這裏：

1. 哪個URL是你的Ajax pinging？
2. 您的create方法是否創建了一條記錄？
3. 是create.js.erb loading？

---

阿賈克斯

下面是關於Ajax的低下來 -

的Rails通過HTTP "requests"工作。每次嚮應用程序發送「請求」時，它都會返回與該請求中的數據相對應的數據。

這意味着如果您想將新數據附加到頁面（無需刷新），則需要以某種方式發送請求（Ajax）

Ajax基本上就像是一個僞瀏覽器，以您的名義（異步）向服務器發送一個請求，讓您回電數據&追加到DOM

URL

<%= 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實例變量的部分。我認爲你不能這樣做（可能是錯誤的）。你需要調用一個絕對路徑的部分，並pass the instance var as an object