Rails使用ajax调用

时间:2016-04-04 01:59:38

标签: javascript ruby-on-rails ajax

在使用ajax调用创建/销毁对象时,我遇到了更新表(添加/删除行)的问题。

我正在处理的应用程序可以将任务分配给各种类别,例如项目,文档等。任务模型是通过与这些对象的多态关系实现的。

我目前正在渲染任务列表和表单以创建新任务作为部分。 form_for新任务使用ajax显示/隐藏表单并创建新任务。

我遇到的问题是我能够创建和销毁任务,而form_for似乎正在运行。但是,当我尝试在js.erb调用中重新渲染部分时,我无法让表更新。该表仅在刷新时更新。

(我还在我还没想到的销毁动作上生成了406 Unknown Format错误,但由于destroy和create动作是相同的,我假设我仍然会有非更新问题)

任务控制器

class TasksController < ApplicationController
  before_action :set_task, only: [:show, :edit, :update, :destroy]
    before_action :logged_in_user, only: [:index, :my_tasks, :edit, :update, :destroy]  
    respond_to :html, :json, :js
.
.
.
  def create
    @assignable = find_assignable
    @task = @assignable.tasks.build(task_params)
    if @task.save
        respond_to do |format|
            format.js
            format.html {redirect_to @task}
        end
    else
        respond_to do |format|
            format.html { render :new }
            format.json { render json: @task.errors, status: :unprocessable_entity }
        end
    end
  end

  def new
    @assignable = params[:assignable_type].constantize.find_by(params[:assignable_id])
    @task = Task.new
  end

  def destroy
        @assignable = params[:assignable_type].constantize.find_by(params[:assignable_id])
        @assignable.tasks.find(params[:id]).destroy
    respond_to do |format|
        format.js
        format.html {redirect_to :action => :index, status: 303 }
        format.json { head :no_content }
    end
  end
.
.
.
def find_assignable
    params.each do |name, value|
        if name =~ /(.+)_id$/
            return $1.classify.constantize.find(value)
        end
    end
       nil
end

我正在创建任务列表的部分内容 的任务/ _task_list

    %tbody
      - assignable.tasks.each do |task|
        -# the path builder below only works if there is one underscore in the object name. MasterPo --> master_pos
        - path = "#{task.assignable_type.gsub(/([a-z])(?=[A-Z])/,'\1_\2').downcase.pluralize}/#{assignable.id}/tasks/#{task.id}" 
        %tr
          %td= best_in_place task, :description, :url => path
          %td= best_in_place task, :priority, :url => path
          %td= best_in_place task, :status, :as => :select, 
            :collection => {"1" => "Approved", "2" => "Pending", "3" => "Outstanding", "4" => "Review"}, :url => path
          %td= best_in_place task, :created_by, :url => path
          %td= task.assignable_type
          %td= link_to 'delete', 
            task_path(assignable, assignable_id: assignable.id, assignable_type: assignable.class.name, id: task.id), 
            remote: true, method: :delete, data: {confirm: 'Are you sure'} 

  %br

  .row
    .col-md-2.col-md-offset-4
      = link_to new_task_path(assignable, assignable_id: assignable.id, assignable_type: assignable.class.name), remote: true do
        %button.btn.btn-default New Task

  .row
    #task-form{:style => "display:none;"}

  :javascript
  $(document).ready(function() {
    /* Activating Best In Place */
    jQuery(".best_in_place").best_in_place();
  });

我的表单部分调用如下所示:

任务/ _form

= simple_form_for [@assignable, Task.new], remote: true do |f|
  - if Task.new.errors.any?
    #error_explanation
      %h2= "#{pluralize(@task.errors.count, "error")} prohibited this task from being saved:"
      %ul
        - @task.errors.full_messages.each do |msg|
          %li= msg

  = f.input :description, as: :text
  = f.input :priority, collection: 1..5
  = f.input :status, collection: ["Open", "Completed", "Assigned"]
  = f.button :submit

现在,我假设我的错误必须与我试图在我的create.js.erb和我的destroy.js.erb中呈现我的_task_list部分有关。 js.erb文件如下:

create.js.erb

$('#tasks').html("<%= j (render partial: 'tasks/task_list', locals: {assignable: @assignable}) %>");
$('#task-form').slideUp(350);

new.js.erb

$('#task-form').html("<%= j (render 'form', locals: {assignable: @assignable}) %>");
$('#task-form').slideDown(350);

destroy.js.erb

$('#tasks').html("<%= j (render partial: 'tasks/task_list', locals: {assignable: @assignable}) %>");

2 个答案:

答案 0 :(得分:0)

您的@assignable对象未重新加载。它仍包含所有以前的数据。在方法中再次定义它以便它将被更新,并且表格将在您的视图中更新而不刷新。

答案 1 :(得分:0)

问题是我在#tasks上调用了ajax,而没有实际给我的表单div id ='tasks',因此没有任何更新。不幸的是,我没有包含页面顶部,因此在我的问题中并不明显