Rails如何在Ajax的帮助下更新页面

时间:2016-03-04 14:53:20

标签: ruby-on-rails

对象Task包含boolean字段done。如何在更改状态后Ajax刷新页面?相反,true - false显示值完整 - 不完整?

routes.rb中:

resources :tasks do
    member do
      post 'done'
    end
  end

控制器:

def done
    @task = Task.find(params[:id])
    @task.update_attributes(:done => params[:done])

    respond_to do |format|
      format.js {}
    end

  end

查看:

....
 <td><%= task.done %></td>
 <td><%= check_box_tag 'done', task.id , task.done, :class => "task-check", remote: true %></td>
....

<script>
  $(".task-check").bind('change', function(){
    $.ajax({
      url: '/tasks/'+this.value+'/done',
      type: 'POST',
      data: {"done": this.checked},
    });
  });

</script>

更新

已编辑的脚本

<script>
  $(".task-check").bind('change', function(){
    $.ajax({
      url: '/tasks/'+this.value+'/done',
      type: 'POST',
      data: {"done": this.checked},
    }).done(function(ajax_response){
     location.reload();
    });
  });

</script>

和控制器

def done
    @task = Task.find(params[:id]) # make sure you have this
    @task.update_attributes(:done => params["done"])

    render :json => { data: "Success", is_done: params[:done] }
  end

如何在不重启的情况下更新页面内容?

1 个答案:

答案 0 :(得分:1)

控制器:

def done
  @task = Task.find(params[:id]) # make sure you have this 
  @task.update_attributes(:done => params["done"])

  render :json => { data: "Success", is_done: params[:done] }
end

查看:

 ....
 <td><%= task.done %></td>
 <td><%= check_box_tag 'done', task.id , task.done, :class => "task-check" %></td>
 ....

 <script>
  $(".task-check").on('change', function(e){
    // removed remote-true. you can preventDefault if you need to but doubt page tries to refresh from a checkbox getting checked. e.preventDefault() if you need it
    $.ajax({
      type: "POST",
      url: '/tasks/done',
      type: 'POST',
      data: {done: $('.task-check').val()},
    }).done(function(ajax_response){
      // update whatever you want after it completes 
    });
   });

 </script>

没有测试过这个,但我一直在写这些。如果它没有发布有效载荷,请告诉我,我会弄清楚缺少的是什么。

如果您只是想更新“不完整”中的值。要完成&#39;,您只需定位称为“不完整”的元素即可。如果它有一类,比如说,任务状态&#39;您可以定位该元素并在函数的.done部分进行更新。例如:

$('.task-status').text('Complete')

应该取代之前所说的不完整。如果它是文本输入,您可以使用.val()代替。如果它只是页面上的文本.text()应该有效。