"Like" system using Laravel, Ajax and jQuery

user_11192429 0
Viewed 925

I don't have the knowledge about Ajax in combination with Laravel. I'm trying to build a like system, its already set up. The problem is; when you click on the like button, the whole page refreshes. But I want it to be dynamic. To do this, I need to use Ajax and jQuery

I have tried building a jQuery function, but I don't know how to parse the {id}

Could you show me where I can learn more about this subject? Maybe a tutorial or could you please explain to me the part I'm missing.

$('.like').on('click', function(event) {
console.log("clicked the button");

$.ajax({
    method: 'POST',
    url: /{id}/addlike
  })
});

This is the like button:

<form action="/{{$new->id}}/addlike" method="post">
                    @csrf
                    <button value="{{$new->likes}}" class='like' type="submit"><i class="fas fa-fire"></i></button>
</form>

This is the like route:

Route::post('/{id}/addlike', 'ImageController@like');```

This is the "like" controller

public function like($id)
{
    $picture = ImageModel::find($id)->increment('likes');

    return back();
}
laravel php jquery
4 Answers

You can pass data in your ajax functions like data: {id: yourid, name: somename}, and also you can assign laravel variable values to js like this:

var testId = '{{$yourid}}'

So in your case you can make url like testId + '/addlike', also always make id or other dynamic thing go at the end like 'addlike/' + testId.

$('.like').on('click', function(event) {
console.log("clicked the button");

var id = '{{$yourId}}'

$.ajax({
    method: 'POST',
    url: id + '/addlike'
  })
});

Hope it helps

user_115069350

Remove type='submit' It will redirect your page, just add type="button" and in .like function() ajax should be like this, always apply if and else condition in case you getting some error so it will reflect on your browser console.

$.ajax({                                                            
                type: "POST",                                                                                                                      
                url: Apiurl,
                data: {
                   "_token": "{{ csrf_token() }}",
                        "id": id
                  }
                success: function (data) 
                {
                    if(data.status ==  'success' )
                    {
                       //apply your condition 
                    }
                    else
                    {
                       console.log('error');                            
                    }                            
               } 
           });
user_89963940

Don't add 

return back();

in your controller instead you can use 

return response()->json(['success' => 'Liked']);

or anything you want to input there to pass the data in ajax. Don't put action in your post instead you can use hidden input to put your id there and call it (if you're using jquery) 

$('input [name=nameofhidden]').val();

then in your ajax add success and what you want to do after updating the data.

var id = $('input[name=nameofhidden]').val();
$.ajax({
    method: 'POST',
    url: '/'+id+'/addlike',
    success: function(ifyouhavedata){
     //what you want to do
    }
  })
user_116836810

JavaScript logic you need to return false, so it'll stop redirecting. see below code. 

$('.like').on('click', function(event) {
    console.log("clicked the button");

    var id = '{{$yourId}}'

    $.ajax({
       method: 'POST',
       url: id + '/addlike'
    });

   return false;
});

Controller should be return like below

return response()->json(['success' => 'Liked'],200);
user_26633510
Related