Update a div after submitting an Ajax post through colorbox?

Question

I'm using Rails 3.2.13 and I have an index view which lists all the posts submitted, I added a button on the same View that when clicked opens the "create a post" form inside a colorbox(iframe) and when I click submit the data gets saved but I have to refresh the page in order to see the newly added post .. I want to appear after I click submit without having to refresh..

This is my index view :

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

and this is the _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 %>

and the js file :

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") %>";
 });

I've been trying to solve it for basically a day and a half. Any help would be appreciated.

UPDATE : post form

<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

Try like this In _form.html.erb

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

In controller

def create

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

end

in create.js.erb

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