brentxscholl

I'm creating a social network site using Laravel. I have a page that load all the posts created by users the currentUser follows. I have a comment section on each post. I'm using ajax to post the comments. Here is my code. Here is the view of the comment-box. It contains a section where I loop through each comment and display them. At the end is the type field so a user can post a new comment: <div class="comment-box-container ajax-refresh"> <div class="comment-box"> @if ($type->comments) @foreach ($type->comments as $comment) <div class="user-comment-box"> <div class="user-comment"> <p class="comment"> <!-- starts off with users name in blue followed by their comment--> <span class="tag-user"><a href="{{ route('profile', $comment->owner->id) }}">{{ $comment->owner->first_name }} {{ $comment->owner->last_name }}</a> </span>{{ $comment->body }} </p> <!-- Show when the user posted comments--> <div class="com-details"> <div class="com-time-container"> {{ $comment->created_at->diffForHumans() }} · </div> </div> </div><!--user-comment end--> </div><!--user-comment-box end--> @endforeach @endif <!--type box--> <div class="type-comment"> <div class="type-box"> {{ Form::open(['data-remote', 'route' => ['commentPost', $id], 'class' => 'comments_create-form']) }} {{ Form::hidden('user_id', $currentUser->id) }} {{ Form::hidden($idType, $id) }} {{--{{ Form::hidden('user_id', $currentUser->id) }}--}} {{ Form::textarea('body', null, ['class' =>'type-box d-light-solid-bg', 'placeholder' => 'Write a comment...', 'rows' => '1']) }} {{ Form::close() }} </div><!--type-box end--> </div><!--type-comment--> </div><!--comment-box end--> The user submit the form for the comment type box by pressing the "enter/return" key. Here is the JS for that <script> $(document).on('keydown', '.comments_create-form', function(e) { if (e.keyCode == 13) { e.preventDefault(); $(this).submit(); } }); </script> Here is my Ajax (function(){ $(document).on('submit', 'form[data-remote]', function(e){ e.preventDefault(); var form = $(this) var target = form.closest('div.ajax-refresh'); var method = form.find('input[name="_method"]').val() || 'POST'; var url = form.prop('action'); $.ajax({ type: method, url: url, data: form.serialize(), success: function(data) { var tmp = $('<div>'); tmp.html(data); target.html( tmp.find('.ajax-refresh').html() ); target.find('.type-box').html( tmp.find('.type-box').html() ); tmp.destroy(); } }); }); })(); When I post a comment on the first post it all works fine. However, when I post a comment on the second, third, fourth etc it only displays the comments from the first post. I have to manually refresh the page, then the correct comments will display. I'll try to illustrate this problem with images. Starting fresh, I can easily submit 2 comments on POST 1 http://s27.postimg.org/6ej76hunn/comment1.jpg When I scroll down to Post 2, I see it already has a comment, I will submit a new comment http://s23.postimg.org/x65ui2ryz/comment_2.jpg HERE'S THE PROBLEM: When I submit the comment on POST 2, the comments that were in POST 2 disappears, and are replaced by the comments from POST 1. http://s30.postimg.org/ugl08oz01/comment_3.jpg The back end still worked, because when I reload the page everything is the way it should be http://s9.postimg.org/w51fgyzen/comment_4.jpg I'm completely stuck. Does anyone know why this is happening and how to fix it?