Question

I have a micropost/messaging system and each time a new micropost or comment/message is submitted the page refreshes in order to display it.

Since I’ve setup up ajax on my form using :remote => true I’d now like to have the micropost or added without the page refreshing.

So far I have:

class MicropostsController < ApplicationController

def create

    if params[:micropost][:user_id].to_i == current_user.id

     @comment = Comment.new(:user_id => current_user.id)
        respond_to do |format|
            if @micropost.save

            format.js   { render :post_on_wall }
            else
            format.js   { render :form_errors }

            end
        end
    else

If the form passes all validation and user actually types in something valid before clicking post then “if @micropost.save” will be true and it will execute the js inside a file I have named “post_on_wall”. If if “@micropost.save” the code inside “form_errors” will be executed.

Inside form_errors I added an alert just to check the micropost doesn’t get posted when a user enters nothing and clicks post. It works fine.

In the “post_on_wall” file I have this:

$('.microposts').prepend('<%= j render("users/partials/microposts") %>');

The problem with this is it basically grabs all the microposts that are looped through in the file thats being rendered “users/partials/microposts” then places them above everything thats in the “.microposts” div. Even the actual form to post a micropost located at the top of the “.microposts” is pushed down below the contents that was just added to the page. In this case 10 spaces down as I’m using pagination and have set per_page to 10.

Here is my html structure.

<div class='cf' id='content'>
    <div id='leftColumn'>
    </div>
    <div class='microposts'>
    </div>
    <div id='rightColumn'>
  </div>
</div>

Each micropost along with its associated comments is stored inside a class called “.postHolder”.

I feel I’m going about this the wrong way. The file this: “users/partials/microposts” points to basically has code that helps display several microposts at a time (10). This is used for something completely different from what I’m trying to do (pagination + endless scrolling).

Anyway I feel the way I should be approaching this is to some how detect the new post that has just been posted. It should be detected as a new “.postHolder” class and then after it is found it should be added to the top of the list of “postHolder”‘s and not replace the micropost form above it.

I’m thinking to just create a separate div to hold all microposts and then place this div underneath the micropost form.. that way I won’t need to worry about the form being pushed down as it wouldn’t be inside the div that contains all the microposts which infact will be what I’ll be prepending to.

This still leaves me with the issue of getting the post that was just posted then adding it to the top of the list.

Anyway I’d really like an example or some good advice that could help me implement this feature.

Thanks for your time
Kind regards.

Answer 1

With your current HTML/partial structure, just do this instead (replace the entire microposts since that’s what your partial creates).

$('.microposts').html('<%= escape_javascript render("users/partials/microposts") %>');

But, in the future, have an _micropost partial that renders the micropost, and then you could easily prepend just the micropost at the top of .microposts.