jquery 按钮在Pjax重新加载上不工作

bvk5enib  于 2023-02-08  发布在  jQuery
关注(0)|答案(2)|浏览(111)

我正在使用Yii2 php框架,我的页面看起来像这样:

根据照片,当我单击其中一个单选按钮时,例如"待定",GridView将只显示所有待定的报销。
问题是,在"操作"列中,按钮不再起作用。正如你所看到的,有"批准"和"不批准"按钮。当我点击"批准"按钮时,它会提醒一条消息"您确定要批准报销吗?"当我点击"确定"时,什么也没有发生。一切都保持不变。
当仅显示批准/未批准状态时也是如此,此时"批准"和"未批准"按钮将不再禁用,而是变为可点击。

    • 菲律宾**

下面是我的index.php视图中GridView的Actions列:

[
    '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(); ?>标记内。

    • Java脚本**
//$(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'); 
})

希望有人能告诉我为什么按钮不工作了,可以帮助我如何修复它。

jw5wzhpr

jw5wzhpr1#

我知道了。这是我更新的代码:

    • 超文本标记语言**
<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>
    • Java脚本**
<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>

我将函数approvedisapprove放在$(document).on('ready pjax:success', function(){...})之外,并将pjax.reloadcontainerfragment更改为#reimbursement_grid
希望这也能帮助任何有同样问题的人。

5n0oy7gb

5n0oy7gb2#

这是工作解决方案

$(document).on("ready pjax:success", function () {
    alert("Write your code here...."); 
});

相关问题