Dynamically update value of a table row using ajax

Question

I am trying to update the value (views) of a table row using Ajax when an onclick event is called.

The views are updated but the problem is that I can't get the new value of the views to show on that particular table row.

I have to refresh the page to see the updated views value and that's not what I want.

I want it updated dynamically as the button is clicked. This is what I am doing.

<table>
@foreach($data as $datum)
<tr>
  <td><span class="view2">{{$datum->views}}</span></td>
  <td><button class="btn btn-default views"  value="{{$datum->game_id}}">click</button></td>
 </tr>
@endforeach                                         
</table>
<script>
        $('.views').click(function (event) {
            var game_id = this.value;
            //alert(game_id);
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type:'POST',
                dataType:'JSON',
                url:'{{url('home/update-views')}}',
                data:'game_id='+game_id,
                success:function(data)
                {
                    var data=eval(data);
                    message=data.message;
                    var countSpan = $(this).parent().parent().find(".view2");
                    countSpan.text(message);
                }
            });
        })
    </script>

Death-is-the-real-truth · Accepted Answer · 2018-03-21 07:48:32Z

1

2 change required.

1.captur the object into a variable so that it can be available for success callback

2.use the variable along with .closest() to paste new message in corresponding td.

So code need to be:-

<script>
    $('.views').click(function (event) {
       var obj = $(this); // captur the object into a variable so that it can be available for success callback
        var game_id = obj.val();// use variable to get value
        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            type:'POST',
            dataType:'JSON',
            url:'{{url('home/update-views')}}',
            data:'game_id='+game_id,
            success:function(data)
            {
                var data=eval(data);
                message=data.message;
                obj.closest('tr').find(".view2").text(message); // use the variable along with closest to paste new message
            }
        });
    })
</script>

edited Mar 21, 2018 at 7:48

answered Mar 21, 2018 at 4:50

Death-is-the-real-truth

72.3k10 gold badges59 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Death-is-the-real-truth Over a year ago

@radioactive glad to help you:):)

4b0 · Accepted Answer · 2018-03-21 05:00:32Z

1

If you use DataTable, you can do this as below:

 var oTable = $('#datatables').dataTable();
 oTable.fnUpdate([
   '<td><span class="view2">{{$datum->views}}</span></td>',
   '<td><button class="btn btn-default views"  value="{{$datum->game_id}}">click</button></td>'
 ], 0);

edited Mar 21, 2018 at 5:00

4b0

22.4k30 gold badges97 silver badges143 bronze badges

answered Mar 21, 2018 at 4:55

Engr. Arda

1771 gold badge1 silver badge11 bronze badges

Comments

Sakshi Garg · Accepted Answer · 2018-03-21 08:07:28Z

The problem with your code is you are getting "this" property of success function whereas you have to use "this" property of ".views click" function.

<table>
@foreach($data as $datum)
    <tr>
        <td><span class="view2">{{$datum->views}}</span></td>
        <td><button class="btn btn-default views"  value="{{$datum->game_id}}">click</button></td>
    </tr>
@endforeach                                         
</table>
<script>
    $('.views').click(function (event) {
        var game_id = this.value;
        var that = this;
        //alert(game_id);
        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            type:'POST',
            dataType:'JSON',
            url:"{{url('home/update-views')}}",
            data:'game_id='+game_id,
            success:function(data)
            {
                var data=eval(data);
                $(that).parent().parent()
                     .find(".view2").text(data.message);
            }
        });
    })
</script>

Collectives™ on Stack Overflow

Dynamically update value of a table row using ajax

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related