Add new Comment from new line not adjacent to the previous one

Question

I've a div with .nameImage class.

  <div class="nameImage" style="border:1px solid black;">
         <div class="image_{{$post->p_id}}"></div>
         <div class="name_{{$post->p_id}}"></div>
         <div class="show_comments_{{ $post->p_id }}"></div>
  </div>

These three things image, name and scomment-body come from response()->json([,,]) and I've appended them like :

   $(".image_"+post_id).append( "<img style = 'width:30px;height:30px;border-radius:50%;' src='"+ folder + data.user_image +"'>" )
   $(".name_"+post_id).append(data.name)
   $(".show_comments_"+post_id).append(data.msg)

In that div I have appended image, name and comment-body of the user when someone leaves a comment all these three things comes into the above div .

The first comment looks like this But When I add new Comment, that comment's info like 'image' is being attached to the first comment's image and the name is attached with first comment's name and so as the comment body.

When I add new comment in the presence of first comment, it becomes something like this

You can see that the image for the second comment is being attached adjacent to the first comment's image.

I want to add new comment from new line or you can say new div.

I've used CSS something like this:

.nameImage{

  display:flex;
  flex-direction: row

 }

But that is not solving the problem.

How can I get the second comment separate from the first comment in new line with image, name and comment-body.

After some suggestions, Now I get this

It depends a lot on how you are adding the new comment - it looks like that is causing the issue. Can you post that code? And the HTML for situation with the second comment would be helpful — Oliver Trampleasure, Jun 15 '19 at 12:49
When a comment is posted, it looks like a comment consists of an image, a name, and the comment. So when a new comment is posted, you should be adding a whole element consisting of those 3 things, which means a new `nameImage` `div` I would think. — lurker, Jun 15 '19 at 12:55
I'm getting all these three things from `response()->json()`, and I'm just appending them into the `divs` that are inside the .nameImage `div`. so the first comment is okay, and I want to add the second comment just below the first one with all these three things . — contributor, Jun 15 '19 at 13:00
The results you are getting (that you don't want) are exactly what your code is telling it to do. You are individually appending an image to the prior image, a name to the prior name, and a comment to the prior comment. See my first comment about needing to treat the entire comment as a single entity. — lurker, Jun 15 '19 at 13:15
Yes, you've marked the correct thing, and I understand that the problem is there, but I don't know how to solve it ? @lurker how can I add a whole element consisting of these three things ? — contributor, Jun 15 '19 at 13:22
Your whole collection of comments need to be inside a `div` that holds them. Then each comment would be a `div` like your `nameImage` `div`. When you add a comment, you would append to the comment collection `div` the `nameImage` `div`. You can append all the details of that `div` (including the sub-`div` elements). — lurker, Jun 15 '19 at 13:33
okay I add this :
id}}>// here these three things will come
But Now I got two comments side by side,now the only issue is to make the second comment from next line — contributor, Jun 15 '19 at 13:43
I've added the new result via screenshot, please have a look at that, now the only issue is the new comment should be from the next line, not side by side with the previous one. — contributor, Jun 15 '19 at 13:52

score 0 · Answer 1 · answered Jun 15 '19 at 13:51

I don't know what your overall scheme is for showing comments, but here's an approach that would do what I think you want.

First, you need a div that holds the collection of comments. That div would contain comments which each would be a div holding all of the elements needed for a single comment:

<div id='commentCollection'>
  <!-- first comment -->
  <div class="nameImage" id="comment_#" style="border:1px solid black;">
    <div class="comment_image"></div>
    <div class="comment_name"></div>
    <div class="comment_text"></div>
  </div>
  ... <!-- more comments -->
</div>

Note that I included a unique id for each comment, and that id is "comment_#". You can use the post_id for #. It's important to keep all id's on a page unique. That's the point of an id. And classes should be general and typically not unique. Those are used for controlling the CSS attributes of whole groups/collections of elements of a given class. For this purpose, I created classes comment_image, comment_name and comment_text so you can control how these look in CSS. They're uniqueness per comment is established by their parent div that has a unique id. If you find you need to locate each individual comment text, image, or name uniquely, you can give them each a unique id as well using the post_id if you wish.

Now when you add a comment, in your jQuery you need to:

(1) Append a new empty .nameImage div (a new comment) to the #commentCollection div. Give it the id comment_${post_id}.

(2) Append your image, name, and comment text to that new comment div:

$(`#comment_${post_id} > div.comment_image`).append( "<img style = 'width:30px;height:30px;border-radius:50%;' src='"+ folder + data.user_image +"'>" )
$(`#comment_${post_id} > div.comment_name`).append(data.name)
$(`#comment_${post_id} > div.comment_text`).append(data.msg)

Anyway, something like that. I wrote the above somewhat quickly and did not test it. I expect that you should be able to get the idea and run with it. Don't just copy this code, try it, and come back and say "it doesn't work" without understanding it and adjusting it as you need first.

For better understanding this , I've opened a question earlier , I've the same code that is there, in addition to the accepted answer code there. https://stackoverflow.com/questions/56599519/get-comments-on-a-post-from-database-using-ajax Please have a look — contributor, Jun 15 '19 at 15:16
I've tried this , but that is not working, it is giving me comments side by side, I want a new comment from new line to be shown there not to . be adjacent to the prior one. @lurker — contributor, Jun 15 '19 at 15:34
@contributor At this point, you need to work on your CSS for your comment `div`s now to get the comments not to be side-by-side but to be vertical. I did not address that part. My answer helped you untangle your authors, images, and comment text so that they were separate. I don't know what else you have around this information on the same page, so it's hard to for me to recommend something definitive without context. You could try using this CSS item for your class `imageName`: `float: left; clear: right;` — lurker, Jun 15 '19 at 16:25

Add new Comment from new line not adjacent to the previous one

1 Answers1