通過colorbox提交Ajax帖子后更新div？

Question

我正在使用Rails 3.2.13，我有一個索引視圖，其中列出了所有已提交的帖子，我在同一視圖上添加了一個按鈕，單擊該按鈕可在colorbox（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部分：

<% @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>

Answer 1

在_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" ) %>');