Question

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

enter image description here

根据照片，当我点击其中一个单选按钮时，例如＆＃34;待定＆＃34;，GridView将仅显示所有待处理的报销。

问题在于，在“操作”列中，按钮不再起作用。正如你所看到的，有＃34;批准＆＃34;和＆＃34;拒绝＆＃34;纽扣。当我点击“批准”按钮时，它会提示一条消息＆＃34;您确定要批准报销吗？＆＃34;当我点击没关系时，没有任何反应。一切都保持不变。

同样如果只显示批准/拒登状态，他们的＆＃34;批准＆＃34;和＆＃34;已拒登＆＃34;按钮不再被禁用，而是变得可点击。

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(){...})之外，并将container的{{1}}和fragment更改为pjax.reload

希望这也可以帮助任何有同样问题的人。

按钮无法在Pjax Reload上运行

1 个答案: