通过colorbox提交Ajax帖子后更新div?

时间:2013-07-23 07:42:21

标签: jquery ruby-on-rails ajax ruby-on-rails-3.2

我正在使用Rails 3.2.13并且我有一个索引视图,其中列出了所有提交的帖子,我在同一个视图中添加了一个按钮,当点击时打开彩色框(iframe)中的“创建帖子”表单当我点击提交时,数据被保存,但我必须刷新页面才能看到新添加的帖子..我想在点击提交后出现,而不必刷新..

这是我的索引视图:

> <h1>Listing posts</h1>
> 
> <table>   <tr>
>     <th>Name</th>
>     <th>Title</th>
>     <th>Content</th>
>     <th></th>
>     <th></th>
>     <th></th>   </tr> <div id="update-container">   <%= render 'show' %> </div>
> 
> </table> <div class="replace"></div>
> 
> <br /> <div></div>
> 
> <a href="" class="test">test</a> <a class='example5' title="My
> Page">Add a post</a> <br />
> 
> <%= link_to "Update User List", @show_path, :remote => true %>
> 
> 
> <%= link_to 'New Post', new_post_path %> <%= link_to "New post
> colorbox", "_form.html.erb", :data => { :colorbox => true,
> :colorbox_height => '300px' } %> <script type="text/javascript"> <%=
> render(:partial => 'posts', :handlers => [:erb], :formats => [:js]) %>
> </script>

这是_show partial:

<% @posts.each do |post| %>
  <tr>
        <td><%= post.name %></td>
    <td><%= post.title %></td>
    <td><%= post.content %></td>
    <td><%= link_to 'Show', post %></td>
    <td><%= link_to 'Edit', edit_post_path(post) %></td>
    <td><%= link_to 'Destroy', post, method: :delete, data: { confirm: 'Are you sure?' }, :remote => true, :class => 'delete_post' %></td>

  </tr>
<% end %>

和js文件:

jQuery.ajaxSetup({
    'beforeSend': function(xhr) {xhr.setRequestHeader("Accept", "text/javascript")}
})

$(function(){

    $('.delete_post').bind('ajax:success', function() {
    $(this).closest('tr').fadeOut();
    });


     $(".example5").colorbox({width:"40%", 
        height:"100%", 
        iframe:true, 
        href:"posts/new", 
        scrolling:false,


     });



    m =$('.replace');
    m.innerHTML = "<%= escape_javascript(render :partial => "show") %>";
 });

我一直试图解决它基本上一天半。任何帮助将不胜感激。

更新:发表表格

<div class="form">
<%= form_for(@post, :remote => true, :class =>"target", :method => "post") do |f| %>
  <% if @post.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@post.errors.count, "error") %> prohibited this post from being saved:</h2>

      <ul>
      <% @post.errors.full_messages.each do |msg| %>
        <li><%= msg %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= f.label :name %><br />
    <%= f.text_field :name %>
  </div>
  <div class="field">
    <%= f.label :title %><br />
    <%= f.text_field :title %>
  </div>
  <div class="field">
    <%= f.label :content %><br />
    <%= f.text_area :content %>
  </div>
  <a href="" class="close">close</a>
  <div class="actions" id="target">
    <%= f.submit :disable_with => 'Please wait...', :class => 'submits'%>
  </div>
<% end %>
</div>

1 个答案:

答案 0 :(得分:0)

试试这样 在_form.html.erb

<%= form_for(@post), :remote => true do |f| %>
<--- fields -->
<%end%>

在控制器中

def create

if @post.save
----codes ----
end
@posts = Post.all
respond_to do |format|
format.js
end

end

在create.js.erb

$('#div').html('<%= escape_javascript( render :partial => "show" ) %>');