Jump to content

Ajax is not returning the correct response. Laravel


Recommended Posts

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 }}
    <!-- Show when the user posted comments-->
              <div class="com-details">
                <div class="com-time-container">
                   {{ $comment->created_at->diffForHumans() }} ·

            </div><!--user-comment end-->
          </div><!--user-comment-box end-->

    <!--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><!--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



        $(document).on('keydown', '.comments_create-form', function(e) {
            if (e.keyCode == 13) {


Here is my Ajax




    $(document).on('submit', 'form[data-remote]', function(e){
        var form = $(this)
        var target = form.closest('div.ajax-refresh');
        var method = form.find('input[name="_method"]').val() || 'POST';
        var url = form.prop('action');

            type: method,
            url: url,
            data: form.serialize(),
            success: function(data) {
                var tmp = $('<div>');
                target.html( tmp.find('.ajax-refresh').html() );
                target.find('.type-box').html( tmp.find('.type-box').html() );



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


When I scroll down to Post 2, I see it already has a comment, I will submit a new comment


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.


The back end still worked, because when I reload the page everything is the way it should be


I'm completely stuck. Does anyone know why this is happening and how to fix it?


Edited by brentxscholl
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.