Databases
StackOverflow2013
Postsdbo
POHow do I grab a comments class after a successful ajax form submit then display it with out page refresh?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow do I grab a comments class after a successful ajax form submit then display it with out page refresh?
    text
    copied!<p>I want to get ".comment_container" for the post just made and place it after the last comment.</p> <p>Each comment and it's related content is stored in a ".comment_container" class.</p> <p>The code below does what I need but not 100%. Rather than append the word TEST I want to append the new comment_contaner holding the comment just posted.</p> <p>I've been cracking at this all day and this is how far I've come. I would appreciate some solutions with examples if possible.</p> <p><strong>JQuery:</strong></p> <pre><code>$('#new_comment').on('ajax:success', function(){ $(this).parent('.post_content').find('.comment_container:last').after("TEST"); }); &lt;% sleep 1 %&gt; </code></pre> <p><strong>HTML:</strong></p> <pre><code> &lt;div class="postHolder"&gt; &lt;nav class="micropostOptions"&gt; &lt;ul class="postMenu"&gt; &lt;li class="deletePost"&gt;&lt;%= link_to content_tag(:span, "Delete post"), m, :method =&gt; :delete, :confirm =&gt; "Are you sure?", :title =&gt; m.content, :class =&gt; "message_delete" %&gt; &lt;/li&gt; &lt;li class="disableCommenting"&gt;&lt;%= link_to content_tag(:span, "Pause commenting"), "2" %&gt;&lt;/li&gt; &lt;li class="blockCommenter"&gt;&lt;%= link_to content_tag(:span, "Block commenter"), "3" %&gt;&lt;/li&gt; &lt;li class="openInNewWindow"&gt;&lt;%= link_to content_tag(:span, "Open in new window"), "4" %&gt;&lt;/li&gt; &lt;li class="reportAbuse"&gt;&lt;%= link_to content_tag(:span, "Report abuse"), "5" %&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; &lt;%= link_to image_tag(default_photo_for_current_user, :class =&gt; "poster_photo"), current_users_username %&gt; &lt;div class="post_content"&gt; &lt;div class="post_container"&gt; &lt;div class="userNameFontStyle"&gt;&lt;%= link_to current_users_username.capitalize, current_users_username %&gt; - &lt;div class="post_time"&gt; &lt;%= time_ago_in_words(m.created_at) %&gt; ago.&lt;/div&gt; &lt;/div&gt; &lt;%= simple_format h(m.content) %&gt; &lt;/div&gt; &lt;% if m.comments.any? %&gt; &lt;% comments(m.id).each do |comment| %&gt; &lt;div class="comment_container"&gt; &lt;%= link_to image_tag(default_photo_for_commenter(comment), :class =&gt; "commenter_photo"), commenter(comment.user_id).username %&gt; &lt;div class="commenter_content"&gt; &lt;div class="userNameFontStyle"&gt;&lt;%= link_to commenter(comment.user_id).username.capitalize, commenter(comment.user_id).username %&gt; - &lt;%= simple_format h(comment.content) %&gt; &lt;/div&gt; &lt;/div&gt;&lt;div class="comment_post_time"&gt; &lt;%= time_ago_in_words(comment.created_at) %&gt; ago. &lt;/div&gt; &lt;/div&gt; &lt;% end %&gt; &lt;% end %&gt; &lt;% if logged_in? %&gt; &lt;%= form_for @comment, :remote =&gt; true, :html =&gt; {:class =&gt; "new_comment} do |f| %&gt; &lt;%= f.hidden_field :user_id, :value =&gt; current_user.id %&gt; &lt;%= f.hidden_field :micropost_id, :value =&gt; m.id %&gt; &lt;%= f.text_area :content, :placeholder =&gt; 'Post a comment...', :class =&gt; "comment_box", :rows =&gt; 0, :columns =&gt; 0 %&gt; &lt;div class="commentButtons"&gt; &lt;%= f.submit 'Post it', :class =&gt; "commentButton" %&gt; &lt;div class="cancelButton"&gt; Cancel &lt;/div&gt; &lt;/div&gt; &lt;% end %&gt; &lt;% end %&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p><strong>Comments controller:</strong></p> <pre><code>class CommentsController &lt; ApplicationController def create @comment = Micropost.find(params[:comment][:micropost_id]).comments.build(params[:comment]) respond_to do |format| if @comment.save unless params[:comment][:recipient].blank? # this will be blank when current user is commenting/replying on their own wall recipient = User.find(params[:comment][:recipient]) UserMailer.new_wall_post_comment_notification(recipient, current_user).deliver if recipient.email_notification == 1 end format.js { render :post_comment } else format.js { render :form_errors } end end end end </code></pre> <p><strong>Comment partial:</strong></p> <pre><code>&lt;div class="comment_container"&gt; &lt;%= link_to image_tag(default_photo_for_commenter(@comment), :class =&gt; "commenter_photo"), commenter(@comment.user_id).username %&gt; &lt;div class="commenter_content"&gt; &lt;div class="userNameFontStyle"&gt;&lt;%= link_to commenter(@comment.user_id).username.capitalize, commenter(@comment.user_id).username %&gt; - &lt;%= simple_format h(@comment.content) %&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="comment_post_time"&gt; &lt;%= time_ago_in_words(@comment.created_at) %&gt; ago. &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Seems to be working apart from 1 minor issue. Let's say I post 4 comment... 1 after each other. First comment 1, second 2, third 3 and fourth 4.. e.g. 1, 2, 3 and 4 the result I get is this:</p> <p><img src="https://i.stack.imgur.com/KdVr8.png" alt="Posting 1, 2 , 3 4 "></p> <p>I have a feeling it's something to do with some kind of reset needing to be done after each comment is left. After refreshing the comments display as expected. 1, 2, 3 and 4. Any thoughts?</p> <p>Kind regards.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload