使用ajax動態更新表行的值

Question

我正在嘗試在調用onclick事件時使用Ajax更新表行的值（視圖）。

視圖已更新，但問題是我無法獲取要在該特定表行上顯示的視圖的新值。

我必須刷新頁面才能看到更新的視圖值，這不是我想要的。

我希望它在單擊按鈕時動態更新。 這就是我在做的事情。

<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需要更改。

1.將對象轉換為變量，以便它可用於success回調

2.使用變量和.closest()將新消息粘貼到相應的td 。

所以代碼必須是： -

<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

如果您使用DataTable ，則可以執行以下操作：

 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

您的代碼的問題是您獲得成功函數的“this”屬性，而您必須使用“.views”功能的“this”屬性。

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