I am using Yii2 php framework and my page looks like this:
Based on the photo, when I click one of the radio buttons, for example "Pending", the GridView
would only display all pending reimbursements.
The problem is that, in the Action column, the buttons don't work anymore. As you can see there are "Approve" and "Disapprove" buttons. When I click the Approve button, it alerts a message "Are you sure you want to approve reimbursement?" and when I click okay, nothing happens. Everything remains the same.
Same goes when only Approved/Disapproved statuses are displayed where their "Approve" and "Disapproved" buttons won't become disabled anymore, they instead become clickable.
PHP
Here is my Actions column in GridView
in my index.php
view:
[
'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'])
.' '
.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', ]])
.' '
.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'])
.' '
.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', ]])
.' '
.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 GridView
is placed inside
<?php \yii\widgets\Pjax::begin(['id' => 'reimbursements', 'enablePushState' => false,]); ?>
and <?php \yii\widgets\Pjax::end(); ?>
tags.
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');
})
Hope someone could be able to tell me why the buttons are not functioning anymore and could help me how to fix it.
I figured it out. Here's my updated code:
HTML
JAVASCRIPT
I put the functions
approve
anddisapprove
outside$(document).on('ready pjax:success', function(){...})
and changed thecontainer
andfragment
ofpjax.reload
to#reimbursement_grid
.Hope this would also help anyone with the same problem.