samedi 18 juin 2016

How do I prepend/append this div as the last child of all the children as opposed to the first?

So I have a view that has renders HTML that looks like this :

enter image description here

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:

enter image description here

Note the .row .question-46-new appears before the last .social-comment.

So that ends up producing this:

screenshot-of-rendered-comments

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:

enter image description here

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:

enter image description here

Here is a picture of the DOM tree after the comment has been added, using the above .js.erb:

enter image description here

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