rails ajax rjs三个的表单提交即时展现应用

转载自：http://hi.baidu.com/lynsahuang/blog/item/b732ca50c8ea05888d543061.html

 

下面内容是ror 提交ajax表单 并使用rjs模板替换div层内容的多种知识的使用和总结，纯属个人研究用，同时希望给到来的同行带来帮助。以下为帖：

一、在所在的控制器上加action：comment

def comment      
    @shop = Shop.find(params[:id])       
    #发送信息
    if request.post?        
      @shopscomment= Shopscomment.new(params[:shopscomment])   
     # @shopscomments = Shopscomment.paginate :page => params[:page]||1, :per_page => 3,:conditions=>['shop_id=?',@shop],:order=>"updated_at desc"    
     respond_to do |format|
         if @shopscomment.save 
            flash[:notice_com] = "评论成功！" 
            format.js              
         else
           flash[:notice_com] = "评论失败，请重新输入！"              
         end
     end
    end 
end

二、接着是制作表单和展示评论的视图。先建立show.rhtml普通视图放置--局部模板（评论显示_comshow.rhtml和表单_comment.rhtml）

    show.rhtml：   加色的三个元素很重要

<div id='comments_show' class="fl-conly">        
           <%=flash[:notice_com]%>    <%#显示控制器的flash内容，提醒用户提交是否正确%>
         </div>          
         <div><%= render :partial => 'comshow' %></div> <%#渲染局部模板评论显示_comshow.rhtml,可以不用渲染%>
        <div class="huofa-ly-morea"><%=will_paginate @shopscomments %></div>
        
        <div class="huofa-bda">
          <div class="huofa-bd-aa">发表我的留言</div>
           <div class="huofa-bd-ba">
            <%=render :partial=>"comment"%>    <%#渲染局部模板提交的表单_comshow.rhtml,可以不用渲染%>

          </div>
        </div>

局部模板：1、评论显示：_comshow.rhtml
<% for shopscomment in @shopscomments %> <div class="huofa-ly-a">
   <div class="huofa-lybga">
     <a href="/<%=shopscomment.user.login%>"><%=shopscomment.user.login%></a>&nbsp; 发表于&nbsp; <%=format_datetime(shopscomment.updated_at)%>                  
   <div class="huofa-lybg-wa"><strong style="#ffd">评论：</strong><%=shopscomment.commentInfo%></div>
                </div>              
            <% end %>

                2、提交表单：_comment.rhtml (关键在于form_remote_for 的那些参数和选项，这里望大牛赐教)
<%form_remote_for(:shopscomment, 
      :loading => "$('comment_spinner').show();", 
      :url =>{:controller => "shops",:action => "comment",:id =>@shop},
      500 => "$$('div#comments_show div.errors')[0].innerHTML = request.responseText; return false;",    
      :complete => "$('comment_spinner').hide();",    
      :html => {:id => "signup-form"}) do |form| %>
   <%= error_messages_for :shopscoment %>
      <table cellpadding="2">

<tr><td><strong style="color:red;">*</strong> 消费感受</td><td><%= form.text_area :commentInfo,:rows=>6,:cols => 50,:class => "text required min-length-20 max-length-1000"%></td></tr>
               
          <tr><td colspan="2" align="center">
         
            <input name="提交" type="submit" value="提交留言" onclick='return validator.validate();'/> 
            <%= image_tag 'spinner.gif' , :style => 'display:none;', :id => 'comment_spinner'%> 
                  </td></tr>
      </table>
<% end %>

三、建立rjs模板comment.rjs，使用新建局部模板_commenttemp.rhtml替换show.rhtml的id为comments_show的divc层，如下：

<div id='comments_show' class="fl-conly">        
      <%=flash[:notice_com]%>    <%#显示控制器的flash内容，提醒用户提交是否正确%> </div>     
comment.rjs模板代码是：

page.insert_html position,id,*option of render    （insert_html的参数选项设置，插入位置，div的id，替代模板）

page.insert_html :top, "comments_show",:partial=>"commenttemp"
page.visual_effect :highlight,'comments_show'

插入层模板_commenttemp.rhtml： （这里就是你想插入什么东西，你喜欢就行了，会替代id为cmoments_show的div层）

 

<div class="huofa-ly-a">
<div class="huofa-lybga">
<a href="/<%=@shopscomment.user.login%>"><%=@shopscomment.user.login%></a>&nbsp; 发表于&nbsp; <%=format_datetime(@shopscomment.updated_at)%>   </div>   
   <div class="huofa-lybg-wa"><strong style="#ffd">评论：</strong><%=@shopscomment.commentInfo%></div>
</div>   

-------------------------------------------------完

 

以上为所做的步骤和部分代码展示，css代码未贴。但足够用了。如果有什么疑问请跟帖问。谢谢。。。。以上纯粹是个人所学，所结，所用，有点菜，研究还未尽深入，希望有大鸟帮忙指导高深。