使用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>

Answer 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>

Answer 2

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

Answer 3

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>