rails4 will_paginate ajax 局部刷新

来源:互联网 发布:淘宝直播中控台网址 编辑:程序博客网 时间:2024/05/01 14:45

注:will_paginate是rails中常用的分页插件,但点击页数的时候,其实刷新的是整个页面,但有时候我们要求的是局部刷新,

        从网上了查了一些资料,整理如下:

1.原理是使用的ajax,rails自身的ajax有两种:ujs和json api,我们使用的是ujs

2.rails4 取消了rjs模板,请使用ujs

       具体请参照:http://chloerei.com/2012/04/21/rails-3-2-ajax-guide/

-----------------------------------------------------------------------------------------------------------------------------------------------------

1.controller,注意看response_to的写法

def my_messages    @messages = Information.where(:user_id => @user_expand.user_id).order("created_at desc").paginate(page: params[:page], per_page: 7)    @mess = Information.where(:user_id => @user_expand.user_id)    respond_to do |format| # <- 这里      format.html #这是默认请求的处理,渲染html(my_messages.html.erb)      format.js # <- 这里是ajax请求处理,渲染js模板(my_messages.js.erb)    end  end
2.view,包括html和js两个模板

my_messages.html.erb
<pre name="code" class="ruby"><div class="permq_content " id="my_messages">        <%= render partial: "messages" %>      </div>
_messages.html.erb

<pre name="code" class="ruby"><div class="user_page fdtl_page " id="will_page">  <%= will_paginate @messages, :container => false, :previous_label => '上一页', :next_label => '下一页', :inner_window => 2, :outer_window => 1 %></div><script>    $(function () {        $('#will_page a').attr('data-remote', 'true'); //指定分页为ajax请求    });</script>
注意此时js的写法,要将will_paginate的a标签 追加 data-remote="true"属性,rails会自动进行ajax解析(渲染js模板)
ps: 表单和a标签,都可以添加data-remote="true"属性,用来提交ajax请求,如果是post方法,最好使用隐藏表单来实现。
my_messages.js.erb
$('#my_messages').html(" <%= escape_javascript(render(partial: 'messages', object: @messages))%> ");

这一段,是将div内的内容替换为新的partial,并且更新其中的对象@messages,如果涉及的参数过多,可以使用下面的写法

$('#my_questions').html(" <%= escape_javascript(render(partial: 'questions', object: @questions,locals: {questions_page: @questions_page, extra: @extra}))%> ");
注意:js.erb模板并不是支持所有的js语法,请谨慎使用!(暂时没找到这方面的说明,只是在项目中遇到了)





  

0 0
原创粉丝点击