Wilson Ng Wilson Ng - 2 months ago 16
jQuery Question

Why GridView Filters does not work when in modal bootstrap?

I have used modal bootstrap to view the GridView and when i used the filters and press the enter, it didn't work and it effect to parent window pressing submit/save button. Why?

This is my jquery function

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

$('#BtnModalPriceList').click(function(e) {
e.preventDefault();

$('#modal').modal('show')
.find('#modalContent')
.load($(this).attr('value'));
});

});


and this is my modal bootstrap in parent form

<?= Html::button('Price List', [
'value' => Url::to('../pricelist/list'),
'class' => 'btn btn-primary',
'id' => 'BtnModalPriceList'
]) ?>

<?php
Modal::begin([
'header' => 'Price List',
'id' => 'modal',
'size' => 'modal-md',
]);

echo "<div id='modalContent'></div>";

Modal::end();
?>


In action list, my code as usual

<?php
$gridColumns = [
['class' => 'yii\grid\CheckboxColumn', 'checkboxOptions' => ['onclick' => 'js:selectItem(this.value, this.checked)']],
[
'attribute' => 'price',
'format' => ['decimal', 0],
],
'date',
[
'attribute' => 'agen_id',
'value' => 'agen.agen_name'
],
'remark_1:ntext',
'remark_2:ntext',

] ?>
<?php Pjax::begin(); ?>
<?=
GridView::widget([
'id' => 'kv-grid-pricelist',
'dataProvider'=>$dataProvider,
'filterModel'=>$searchModel,
'columns'=>$gridColumns,
]);
?>
<?php Pjax::end(); ?>


What have I missed?

Answer

Finally I get it works. Thanks to member of Yii PHP framework community in facebook. The answer is 1. Put the modal outside of the active form. 2. Using Pjax by giving the id such as <?php Pjax::begin(['id' => 'some-id']); ?>

Comments