Rails in place edit with jQuery

Posted by wxianfeng Tue, 13 Oct 2009 16:43:00 GMT
环境 : ruby 1.8.6 + rails 2.1.0 + jquery 1.3.2

效果：

http://www.appelsiini.net/projects/jeditable/default.html

http://15daysofjquery.com/examples/jqueryEditInPlace/divEdit.php

像上面的这种 in place edit 的效果在网络上很常见。。下面介绍一种在rails中的解决方案。。当然后台不一定是 ror 平台了

资源下载：

http://github.com/tuupola/jquery_jeditable 下载后，只需要里面的 jquery.jeditable.js 步骤:

1,加载 jquery.js 和 jquery.jeditable.js

2,View

<script>
  $(document).ready(function() {
    $(".edit_descrip").editable(this.href, {
      indicator : "<img src='/images/indicator.gif'>",
      type   : 'textarea',
      submitdata: { _method: "get" },
      select : true,
      submit : '修改',
      cancel : '取消',
      cssclass : "editable",
      tooltip   : '点击修改',
      id   : 'flag'
    });
  });
</script>
<p  class="edit_descrip" id="edit_descrip" onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='white'"><%= h @client_info.description %> </p>
 默认向后台发送的是id 和 value 两个参数，值分别是p对应的id 和 p对应的内容，当然你也可以改变参数名字 
id : 'flag'
value : 'newvalue'
 就对应传递 flag 和 newvalue 两个参数 了

3,Controller: 
if request.xhr?
  if params[:flag]       
        case params[:flag]
        when 'edit_descrip'   
          ClientInfo.update_field(current_client_info.id,params[:value],'descrip') # 更新数据库
          render :text => params[:value] #返回数据
    end
  end
end
 4,改变一些默认的参数，可以到 jquery.jeditable.js 中修改，例如 textarea 的默认大小 等等。。。。

5,或者你可以指定target为某个函数，这样就可以自己扩展，例如有额外的返回数据，返回后需要更新某个 DOM元素等等

 <script>
    $(document).ready(function() {
      $(".edit_state").editable(submitEdit, {
        indicator : "<img src='/images/indicator.gif'>",
        type   : 'textarea',
        submitdata: { _method: "get" },
        select : true,
        submit : '修改',
        cancel : '取消',
        cssclass : "editable",
        tooltip   : '点击修改',
        id   : 'flag'
      });
    });

    function submitEdit(value, settings)
    {
      var edits = new Object();
      edits[settings.name] = [value];
      edits[settings.id] = ['edit_state']
      $.ajax({
        url: this.href,
        type: "GET",
        data : edits,
        dataType : "json",
        complete : function ()
        {
          $("#state_time").html('0分钟前');
        }
      });
      return value;
    }

  </script>
 See:

http://www.appelsiini.net/projects/jeditable

http://stackoverflow.com/questions/966539/how-to-get-out-of-jquery-jeditable-mess

Read full article 2 comments


Rails 自引用实现最近来访

Posted by wxianfeng Mon, 12 Oct 2009 04:33:00 GMT

环境 ： ruby 1.8.6 + rails 2.1.0 + ubuntu 8.10

效果：就像 xiaonei 这样

snapshot30

当然最简单的办法 你可以 直接sql操作就ok 了。。。我这里介绍 利用 rails的 activerecord自引用 解决，一个系统有一个users表，但是每一个user可能有friends 或者 followers ， 而这个 friends 和 followers 也在 users这个表里，这样就需要 用到 rails的自引用了。

实现最近来访 只是实现了一层的 相当于 取出 twitter的 followers

表结构：

1,用户表 client_infos （username,password,........）

2,访问关系表 vistorships

snapshot31

model关系

class ClientInfo < ActiveRecord::Base
 has_many :vistorships  
 has_many :vistors, :through => :vistorships
end
 
class Vistorship < ActiveRecord::Base 
 belongs_to :client_info   
belongs_to :vistor, :class_name => "ClientInfo"
end

添加最近来访 数据：

    @client_info = ClientInfo.find(params[:id])
    @recentvistor = @client_info.vistorships.build( :vistor => current_client_info)
    @recentvistor.save

取出全部来访 数据

@client_info.vistorships

Model 取出最近来访的12个vistor

    def get_vistors(client_info) # client_info 是显示那个人的对象
      find(:all,
        :conditions => ["client_info_id = ? and vistor_id <> ?" , client_info.id , client_info.id],
        :select => ["distinct(vistor_id)"],
        :limit => 12,
        :order => 'created_at DESC'
      )
    end

controller中取出数据

@latestvistors = Vistorship.get_vistors(@client_info)

View中输出

<ul>
        <%- for lvistor in @latestvistors -%>
<li>
            <%= image_link lvistor.vistor, :image => :thumbnail , :class => 'image' %>
            <%= client_info_link lvistor.vistor, :class => 'name' %>
          </li>

        <%- end -%>
      </ul>

ref:

http://railscasts.com/episodes/163-self-referential-association

Read full article no comments