Кнопка не работает на Pjax Обновить

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(){...}) и изменил container и fragment из pjax.reload - #reimbursement_grid.

Надеюсь, это также поможет любому, у кого есть такая же проблема.