javascript - Button not working on Pjax Reload

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 bee disabled anymore, they instead bee 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'])
            .'&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 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 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.

Same goes when only Approved/Disapproved statuses are displayed where their "Approve" and "Disapproved" buttons won't bee disabled anymore, they instead bee 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'])
            .'&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 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.

Share Improve this question edited Jun 17, 2015 at 8:55 Flexicoder 8,5314 gold badges45 silver badges58 bronze badges asked Jun 17, 2015 at 6:57 kaynewilder 8537 gold badges28 silver badges53 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 4

I figured it out. 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 the functions approve and disapprove outside $(document).on('ready pjax:success', function(){...}) and changed the container and fragment of pjax.reload to #reimbursement_grid.

Hope this would also help anyone with the same problem.

HERE IS THE WORKING SOLUTION

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Button not working on Pjax Reload - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)