javascript - 按钮在 Pjax Reload 上不起作用

Question

我正在使用 Yii2 php 框架，我的页面如下所示:

根据照片，当我单击其中一个单选按钮(例如“待定”)时，GridView只会显示所有待处理的报销。

问题是，在“操作”列中，按钮不再起作用。如您所见，有“批准”和“不批准”按钮。当我单击“批准”按钮时，它会提示一条消息“您确定要批准报销吗？”当我点击确定时，没有任何反应。一切都保持不变。

当仅显示已批准/未批准状态时，其“批准”和“未批准”按钮将不再禁用，而是变为可点击。

PHP
这是我在 GridView 中的操作专栏在我的 index.php查看:

[
    'label' => 'Action',
    'content' => function ($model, $key, $index, $column) {
        if($model->status == "Pending"){
            return Html::button('<span class="glyphicon glyphicon-eye-open"></span>', ['value' => Url::to(['view']).'&id=' . (string)$model->_id, 'class' => 'btn btn-warning btn-view btn-responsive','id' => 'modalButton2'])
            .'&nbsp'
            .Html::button('<i class="fa fa-check-circle-o"></i> Approve', ['value' =>  $model->_id, 'class' => 'btn btn-info btn-responsive', 'onclick'=>'approve(value)', 'data-toggle'=>'tooltip','title'=>'Approve', 'data' => [ 'confirm' => 'Are you sure you want to approve this reimbursement?', 'method' => 'post', ]])
            .'&nbsp'
            .Html::button('<i class="fa fa-ban"></i> Disapprove', ['value' =>  $model->_id, 'class' => 'btn btn-danger btn-responsive', 'onclick'=>'disapprove(value)', 'data-toggle'=>'tooltip','title'=>'Disapprove', 'data' => [ 'confirm' => 'Are you sure you want to disapprove this reimbursement?', 'method' => 'post', ]]);
        }else{
            return Html::button('<span class="glyphicon glyphicon-eye-open"></span>', ['value' => Url::to(['view']).'&id=' . (string)$model->_id, 'class' => 'btn btn-warning btn-view btn-responsive','id' => 'modalButton2'])
            .'&nbsp'
            .Html::button('<i class="fa fa-check-circle-o"></i> Approve', ['value' =>  $model->_id, 'class' => 'btn btn-default btn-responsive disable', 'onclick'=>'approve(value)', 'data-toggle'=>'tooltip','title'=>'Approve', 'data' => [ 'confirm' => 'Are you sure you want to approve this reimbursement?', 'method' => 'post', ]])
            .'&nbsp'
            .Html::button('<i class="fa fa-ban"></i> Disapprove', ['value' =>  $model->_id, 'class' => 'btn btn-default btn-responsive disable', 'onclick'=>'disapprove(value)', 'data-toggle'=>'tooltip','title'=>'Disapprove', 'data' => [ 'confirm' => 'Are you sure you want to disapprove this reimbursement?', 'method' => 'post', ]]);
        }
     }
]

这GridView放在里面 <?php \yii\widgets\Pjax::begin(['id' => 'reimbursements', 'enablePushState' => false,]); ?>和 <?php \yii\widgets\Pjax::end(); ?>标签。

JavaScript

//$(document).ready(function(){
$(document).on('ready pjax:success', function(){
    $('.disable').attr('disabled','disabled'); 

    $('input[type=radio]').prop('name', 'filter');
    var showAll = $('input[name=filter]').val();
    if(showAll == "Show All") {
        $('#reimbursements').addClass('showAll');
    }
    $('.showAll').load();
    function load(){
        $('.showAll').load();
    }

    $('#filter .radio > label').on('click', function(e) {
        var input = $('input', e.target);
        var sortby = input.val();
        $.ajax({
            url: 'index.php?r=reimbursement/filter',
            dataType: 'json',
            method: 'GET',
            data: {sortby: sortby},
            success: function (data, textStatus, jqXHR) {
                $('.disable').attr('disabled','disabled'); 
                $.pjax.reload({container:'#reimbursements .table-responsive.all', fragment: '#reimbursements .table-responsive.all'});
                $('.disable').attr('disabled','disabled'); 
            },
            error: function (jqXHR, textStatus, errorThrown) { 
                alert("error");
            }
        });
        $('.disable').attr('disabled','disabled'); 
    });

    $('.disable').attr('disabled','disabled'); 

    function approve(id){ 
        $.ajax({
            url: 'index.php?r=reimbursement/approve',
            dataType: 'json',
            method: 'GET',
            data: {id : id},
            success: function (data, textStatus, jqXHR) {
                $.pjax.reload({container:'#reimbursement_grid'});
            },
            error: function (jqXHR, textStatus, errorThrown) { 
                alert("error");
            }
        });
    }

    function disapprove(id){ 
        $.ajax({
            url: 'index.php?r=reimbursement/disapprove',
            dataType: 'json',
            method: 'GET',
            data: {id : id},
            success: function (data, textStatus, jqXHR) {
                $.pjax.reload({container:'#reimbursement_grid'});
            },
            error: function (jqXHR, textStatus, errorThrown) { 
                alert("error");
            }
        });    
    }
    $('.disable').attr('disabled','disabled'); 
})

希望有人能告诉我为什么按钮不再起作用，并能帮助我解决问题。

Answer 1

我想通了。这是我更新的代码:

HTML

<div class="table-responsive all">
    <?php \yii\widgets\Pjax::begin(['id' => 'reimbursement_grid']); ?>
        <?php echo $this->render('_index', ['dataProvider' => $dataProvider ]); ?>
    <?php \yii\widgets\Pjax::end(); ?>
</div>

JavaScript

<script>
//$(document).ready(function(){
$(document).on('ready pjax:success', function(){
    $('input[type=radio]').prop('name', 'filter');
    var showAll = $('input[name=filter]').val();
    if(showAll == "Show All") {
        $('#reimbursements').addClass('showAll');
    }
    $('.showAll').load();
    function load(){
        $('.showAll').load();
    }

    $('#filter .radio > label').on('click', function(e) {
        var input = $('input', e.target);
        var sortby = input.val();
        $.ajax({
            url: 'index.php?r=reimbursement/filter',
            dataType: 'json',
            method: 'GET',
            data: {sortby: sortby},
            success: function (data, textStatus, jqXHR) {
                $.pjax.reload({container:'#reimbursement_grid', fragment: '#reimbursement_grid'});
            },
            error: function (jqXHR, textStatus, errorThrown) { 
                alert("error");
            }
        });
    });

    $('.disable').prop('disabled','disabled');     
});

function approve(id){ 
    $.ajax({
        url: 'index.php?r=reimbursement/approve',
        dataType: 'json',
        method: 'GET',
        data: {id : id},
        success: function (data, textStatus, jqXHR) {
            $.pjax.reload({container:'#reimbursement_grid'});
        },
        error: function (jqXHR, textStatus, errorThrown) { 
            alert("error");
        }
    });
}

function disapprove(id){ 
    $.ajax({
        url: 'index.php?r=reimbursement/disapprove',
        dataType: 'json',
        method: 'GET',
        data: {id : id},
        success: function (data, textStatus, jqXHR) {
            $.pjax.reload({container:'#reimbursement_grid'});
        },
        error: function (jqXHR, textStatus, errorThrown) { 
            alert("error");
        }
    });    
}
</script>

我将函数 approve 和 disapprove 放在了 $(document).on('ready pjax:success', function(){...} ) 并将pjax.reload 的container 和fragment 更改为#reimbursement_grid。

希望这也能帮助遇到同样问题的人。