Button not working on Pjax Reload

I am using Yii2 php framework and my page looks like this:

enter image description here

Based on the photo, when I click one of the radio buttons, for example Pending, it GridView

will only display all pending compensation.

The problem is the buttons in the Action column no longer work. As you can see, there are "Approve" and "Decline" buttons. When I click the "Approve" button, it says "Are you sure you want to approve the refund?" and when i am ok nothing happens. Everything remains the same.

The same thing happens when only the Approved / Disapproved statuses are displayed, where their "Approved" and "Disapproved" buttons will no longer be disabled, instead they become clickable.

PHP
Here is my "Actions" column GridView

in the view 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', ]]);
        }
     }
]

      

This one GridView

is inside <?php \yii\widgets\Pjax::begin(['id' => 'reimbursements', 'enablePushState' => false,]); ?>

and <?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'); 
})

      

Hopefully someone can tell me why the buttons no longer work and can help me fix this.

+3


source to share


1 answer


I understood that. Here's my updated code:

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>

      

I put functions on approve

both disapprove

outside $(document).on('ready pjax:success', function(){...})

and changed on container

and on .fragment

pjax.reload

#reimbursement_grid

Hope this also helps anyone with the same problem.

+2


source







All Articles