Question

Here is the code I’m currently using:

$.ajax({
    success: function(){
        $('.post_container').append('test <br />');
    }
});
<% sleep 1 %>

It is similar to the code I used for my single main micropost form but with this there are several comments that use the same class and so test is being applied to all post_containers rather than the one the post was just made to. “test” text will eventually be replaced with the div that holds the actual comments users post.

Normally I would use “this” but that won’t work here.

HTML:

<div class="post_content">
    <div class="post_container">
        <div class="userNameFontStyle">
            <%= link_to current_users_username.capitalize, current_users_username %> -
            <div class="post_time">
                <%= time_ago_in_words(m.created_at) %> ago.
            </div>
        </div>  
        <%=  simple_format h(m.content) %>
    </div>
    <% if m.comments.any? %>
    <% comments(m.id).each do |comment| %>
    <div class="comment_container">
        <%= link_to image_tag(default_photo_for_commenter(comment), :class => "commenter_photo"), commenter(comment.user_id).username %>
        <div class="commenter_content">
            <div class="userNameFontStyle">
                <%= link_to commenter(comment.user_id).username.capitalize, commenter(comment.user_id).username %> - <%=  simple_format h(comment.content) %>
            </div>
        </div>
        <div class="comment_post_time">
            <%= time_ago_in_words(comment.created_at) %> ago.
        </div>
    </div>
    <% end %>
    <% end %>
    <% if logged_in? %>
    <%= form_for @comment, :remote => true do |f| %>
    <%= f.hidden_field :user_id, :value => current_user.id %>
    <%= f.hidden_field :micropost_id, :value => m.id %>
    <%= f.text_area :content, :placeholder => 'Post a comment...', :class => "comment_box", :rows => 0, :columns => 0 %>
    <div class="commentButtons">         
        <%= f.submit 'Post it', :class => "commentButton" %>
        <div class="cancelButton">
            Cancel
        </div>
    </div>   
    <% end %>
    <% end %>
    </div>
</div>

How would I deal with this?

Kind regards

Answer 1

This is how I had to do it in the end.

.new_comment is my form id

$('.new_comment').on('ajax:success', function(){
    $(this).parent('.post_content').find('.comment_container:last').after("<BR />TEST <BR />");

});

<% sleep 1 %>

The only issue now is identifying the actual comment_container for the post just made.