Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

ufodisko's avatar

jQuery AJAX returns 500 (Internal Server Error) but works when I reload the page

I have a Like Status button that sends data using AJAX to the controller.

When I click the button, the button changes from "like" to "dislike" and all the classes and form action get changed as well.

The problem is, if I like the status, I see the changes reflected, but if I decided to dislike it without reloading the page, I get this error

GET http://localhost/socialnet/public/likestatusCount/undefined 500 (Internal Server Error)

If I reload the page and click dislike, my vote gets removed from the database and the button changes back to "like"

It works if I reload the page.

If I remove the get() request to retrieves the likes count, nothing happens and console.log() returns an empty row, I don't see any data being returned.

I opened laravel.log and I saw this error

local.ERROR: exception 'ErrorException' with message 'Trying to get property of non-object' in C:\xampp\htdocs\socialnet\app\Http\Controllers\FeedController.php:140

which is this line in getlikesCounter() method

return Response::json(['count' => StatusLikes::where('status_id', $status->id)->count()]);

I tried using the button id #like-status and #dislike-status for the selector but got the same error.

I am using Laravel 5.2

The form in the view

@if(\App\StatusLikes::where(['status_id' => $status->id, 'user_id' => Auth::user()->id])->first())
        {!! Form::open(['action' => 'FeedController@dislikeStatus', 'id' => 'dislike_form', 'class' => 'dislikeform']) !!}
        <button type="submit" class="btn btn-danger btn-xs dislike" data-user="{{ Auth::user()->id }}" data-status="{{ $status->id }}" id="dislike-status">
           <i class="fa fa-thumbs-down"></i> <span class="dislike-button-text">Dislike</span> <span class="dislike-button-counter">({{ $likes_count }})</span>
        </button>
       {!! Form::close() !!}
       @else
       {!! Form::open(['action' => 'FeedController@likeStatus', 'id' => 'like_form', 'class' => 'likeform']) !!}
         <button type="submit" class="btn btn-info btn-xs like" data-user="{{ Auth::user()->id }}" data-status="{{ $status->id }}" id="like-status">
           <i class="fa fa-thumbs-up"></i> <span class="like-button-text">Like</span> <span class="like-button-counter">({{ $likes_count }})</span>
          </button>
       {!! Form::close() !!}
@endif

The methods in the controller for like, dislike, and get likes count

    public function likeStatus() {
        if (Input::has('like_status')) {
            $status = Input::get('like_status');
            $selectedStatus = Status::find($status);

            $selectedStatus->likes()->create([
                'user_id' => Auth::user()->id,
                'status_id' => $status
            ]);

            $response = [
                'status' => 'success',
                'msg' => 'You have liked this status',
            ];

            return Response::json($response);
            //return redirect(route('feed'));
        }
    }

    public function dislikeStatus() {

        if (Input::has('dislike_status')) {
            $status = Input::get('dislike_status');
            $selectedStatus = Status::find($status);

            $selectedStatus->likes()->where('user_id', Auth::user()->id)->delete([
                'status_id' => $status
            ]);

            $response = array(
                'status' => 'success',
                'msg' => 'You have disliked this status',
            );

            return Response::json($response);
            //return redirect(route('feed'));

        }
    }

    public function getlikesCounter($id) {
        $status = Status::find($id);
        return Response::json(['count' => StatusLikes::where('status_id', $status->id)->count()]);
    }

The javascript form likeform and dislikeform

    $('.likeform').submit(function(e) {
        e.preventDefault();

        var submitBtn = $(this).find('.like');
        var form = $(this).find('.likeform')
        var likeText = $(this).find('span.like-button-text');
        var likeCounter = $(this).find('span.like-button-counter');
        var status_id = submitBtn.data('status');
        var user_id = submitBtn.data('user');
        var token = $('input[name=_token]').val();

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': token
            }
        });

        $.ajax({
            url: 'http://localhost/socialnet/public/likeStatus',
            method: 'POST',
            cache: false,
            data: { like_status: status_id, user_id: user_id, _token: token },
            success: function(data) {
                submitBtn.removeClass('btn-info').addClass('btn-danger');
                submitBtn.find($(".fa")).removeClass('fa-thumbs-up').addClass('fa-thumbs-down');
                submitBtn.closest("form").removeClass('likeform').addClass('dislikeform').attr('id', 'dislike_form').attr('action', 'http://localhost/socialnet/public/dislikeStatus');
                submitBtn.closest("form").find("input[name=like_status]").attr('name', 'dislike_status');
                submitBtn.removeClass('like').addClass('dislike');
                submitBtn.find($(".like-button-text")).removeClass('like-button-text').addClass('dislike-button-text');
                submitBtn.find($(".like-button-counter")).removeClass('like-button-counter').addClass('dislike-button-counter');
                likeText.text('Dislike');

                $.get("http://localhost/socialnet/public/likestatusCount/" + status_id, function(data) {
                    likeCounter.text('(' + data.count + ')');
                });

                console.log(data);
            },
            error: function() {
                console.log('error');
            }
        });
    });

    $('.dislikeform').submit(function(e) {
        e.preventDefault();

        var submitBtn = $(this).find('.dislike');
        var form = $(this).find('.dislikeform')
        var likeText = $(this).find('span.dislike-button-text');
        var likeCounter = $(this).find('span.dislike-button-counter');
        var status_id = submitBtn.data('status');
        var user_id = submitBtn.data('user');
        var token = $('input[name=_token]').val();

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': token
            }
        });

        $.ajax({
            url: 'http://localhost/socialnet/public/dislikeStatus',
            method: 'POST',
            cache: false,
            data: { dislike_status: status_id, user_id: user_id, _token: token },
            success: function(data) {
                submitBtn.removeClass('btn-danger').addClass('btn-info');
                submitBtn.find($(".fa")).removeClass('fa-thumbs-down').addClass('fa-thumbs-up');
                submitBtn.closest("form").removeClass('dislikeform').addClass('likeform').attr('id', 'like_form').attr('action', 'http://localhost/socialnet/public/likeStatus');
                submitBtn.closest("form").find("input[name=dislike_status]").attr('name', 'like_status');
                submitBtn.removeClass('dislike').addClass('like');
                submitBtn.find($(".dislike-button-text")).removeClass('dislike-button-text').addClass('like-button-text');
                submitBtn.find($(".dislike-button-counter")).removeClass('dislike-button-counter').addClass('like-button-counter');
                likeText.text('Like');

                $.get("http://localhost/socialnet/public/likestatusCount/" + status_id, function(data) {
                    likeCounter.text('(' + data.count + ')');
                });

                console.log(data);
            },
            error: function() {
                console.log('error');
            }
        });
    });
0 likes
3 replies
RoboRobok's avatar

Look at your URL, are you sure it's okay?

/likestatusCount/undefined

You probably wanted to concatenate 'likestatusCount/' + something in JavaScript, but this something is undefined. In other words: it's a front-end bug.

ufodisko's avatar

Yes, that is the problem. But the JS function works if I reload the page.

And status_id is present at all times.

RoboRobok's avatar

Well, don't expect us to do the job for you, try to debug your code step by step.

Please or to participate in this conversation.