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

你的代码存在的问题是你得到的＃34;这个＆＃34;成功函数的属性，而你必须使用＆＃34;这个＆＃34; ＆＃34; .views的属性点击＆＃34;功能

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

使用ajax动态更新表行的值

3 个答案: