Halnex Halnex - 4 months ago 13
Javascript Question

jQuery get() request retrieves data before the new data has been submitted

The title may be a bit vague, sorry about that, allow me to explain.

I have a

users_status_likes
table with the follow columns: id, user_id, status_id

The idea is simple, when a user clicks the like button of a status, the data gets submitted to the database with the logged in
user_id
and the
status_id
of the status.

Now, I'm trying to do a
get()
request to retrieve the number of likes a status has. The problem is, the get request is retrieving the number of likes the status had before the new like has been added.

For example, there's a status that has 1 like, but then I click the like button, so now it has 2 likes, there are 2 rows in the table for the same
status_id
but each has a different
user_id
. When I click the like button, the console says
count 1
but it really should be
count 2
because I just liked the status and data has been submitted to the table.

I am using Laravel 5.2, so let me start by posting the route

Route::get('likestatusCount/{id}', 'FeedController@getlikesCounter');


The
getlikesCounter()
method in
FeedController


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


And the form inside the view

{!! 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() !!}


The javascript

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

var submitBtn = $(this).find('.like');
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');
likeText.text('Dislike');
console.log(data);
},
error: function() {
console.log('error');
}
});

// data.count returns the count before the new like has been submitted
$.get("http://localhost/socialnet/public/likestatusCount/" + status_id, function(data) {
likeCounter.text(data.count);
console.log(data.count);
});
});

Answer

move this:

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

inside

success: function(data){

}
Comments