CODEWITHSUNDEEP
phpjquerylaravel
S-o
S-o

Reputation: 117

"Like" system using Laravel, Ajax and jQuery

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();
}

Upvotes: 2

Views: 1293

Answers (4)

Rohit Agrohia
Rohit Agrohia

Reputation: 418

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');                            
                    }                            
               } 
           });

Upvotes: 1

Chirag Pipariya
Chirag Pipariya

Reputation: 441

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);

Upvotes: 0

Jovs
Jovs

Reputation: 892

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
    }
  })

Upvotes: 0

Source Edin
Source Edin

Reputation: 101

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

Upvotes: 1

Related Questions