Ajax is not returning the correct response. Laravel

[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?

 

Edited March 1, 2015 by brentxscholl