So I have a view that has renders HTML that looks like this :
What is happening now is when the user adds a new comment, it is now added to the top of that list, i.e. the div.social-comment that is highlighted. However, I want it to be added after the last in the list, not as the first. How do I do that?
This is what the create.js.erb looks like:
$(".question-<%= @comment.commentable.id %>").prepend("<%= j (render partial: 'comments/comment', locals: { comment: @comment}) %>");
How can I achieve what I want?
Edit 1
My bad, I wasn't fully clear with the original question.
I can't just use .append, due to the presence of a form field that is currently at the bottom of that list of children.
If I do use append, this is what the modified HTML looks like:
Note the .row .question-46-new appears before the last .social-comment.
So that ends up producing this:
Which is obviously what I don't want.
What I want is for the new comment to appear right above that Write Comment textbox, and at the end of the list of existing comments.
Edit 2
This is what my DOM tree looks like after attempting Pranav's suggestion:
Edit 3
After the latest attempt from Pranav, these are the results.
I tried this:
$(".question-<%= @comment.commentable.id %>").children(".social-comment").last().after("<%= j (render partial: 'comments/comment', locals: { comment: @comment}) %>");
That works well when there are existing comments, it just adds it to the last of the existing ones. When there are no existing comments though, the new comment just disappears.
Here is a picture of the DOM tree when there are no comments:
Here is a picture of the DOM tree after the comment has been added, using the above .js.erb:
No change. For what it's worth, I also tried it with the other suggestion:
$(".question-<%= @comment.commentable.id %> > .social-comment:last").after("<%= j (render partial: 'comments/comment', locals: { comment: @comment}) %>");
And I get similar behavior. It works when there are existing comments, but doesn't work when there are none.
Aucun commentaire:
Enregistrer un commentaire