CODEWITHSUNDEEP
phpjquerylaravel
rafitio
rafitio

Reputation: 568

jQuery automatically updated value on view when button clicked

I was create like button with current value on database and when the button has been clicked the value must be automatically updated on the view. Currently, the value was successfully updated on database, but not automatically updated on view.

Here is my jquery code:

<script type="text/javascript">
    $(document).ready(function(){
        $('#like').on('click', function(e){
            var id = '{{$news->id}}';
            $.get('{{ url('view/like')}}/'+id, function(data){
                console.log(id);
                console.log(data);
                $('#like_data').empty();
                $.each(data, function(index, element){
                    $('#like_data').append("<p>"+this.like+"</p>");
                });
            });
        });
    });
</script>

Here is my controller:

public function like($id){

    $news = News::find($id);

    $news->like += 1;
    $news->save();

    return $news;
}

Upvotes: 0

Views: 61

Answers (2)

Mohammad Nurul Huda Rimon
Mohammad Nurul Huda Rimon

Reputation: 2535

You need to pass JSON response from your controller. Like this

public function like($id){

    $news = News::find($id);

    $news->like += 1;
    $news->save();

    return response()->json([$news], 200);
}

you don't need to use $.each() for this response because you send only single object response. Just simply write this code: 

$('#like_data').html("<p>"+data.like+"</p>");

if you want to use each just simply write:

 $.each(data, function (index, element) {
      $("#like_data").append("<p>" + element.like + "</p>");
 });

Upvotes: 1

Nazmul Hasan
Nazmul Hasan

Reputation: 1987

Try this

<script type="text/javascript">
    $(document).ready(function(){
        $('#like').on('click', function(e){
            var id = '{{$news->id}}';
            $.get('{{ url('view/like')}}/'+id, function(data){
                console.log(id);
                console.log(data);
                $('#like_data').empty();
                $.each(data, function (index, element) {
                 $("#like_data").append("<p>" + element.like + "</p>");
              });
            });
        });
    });
</script>

Upvotes: 0

Related Questions