Bootstrap3 Modal not working with GridView's pjax - twitter-bootstrap-3

Question

I have a following GridView, but unfortunately Bootstrap modal isn't working properly if I have used Pjax pagination or search. Well, the modal does show up, but it won't submit the form. And when I leave the modal out of Pjax(), then it isn't loaded at all.
Pjax::begin(['id' => 'pjax_id', 'timeout' => false, 'enablePushState' => false]);
echo GridView::widget([
'dataProvider' => $details,
'filterModel' => $searchModel,
'columns' => [
['class' => 'yii\grid\SerialColumn'],
['format' => 'raw',
'label' => 'Category',
'value' => function ($data) {
$string = '';
foreach ($data['Category'] as $category) {
$string .= $category->category_name . '<br/>';
}
return $string;
}],
'book_name',
['format' => 'raw',
'contentOptions' => ['class' => 'form-cell'],
'label' => '',
'value' => function ($data) {
$buttons = Html::button('Edit', ['class' => 'btn btn-default mleft modallink', 'data-toggle' => 'modal', 'data-target' => '#'.$data->cat_id]);
return $buttons;
}
],
[
'format' => 'raw',
'label' => '',
'value' => function ($data) {
if (Yii::$app->user->identity->user_type == 'admin') {
$string = '</span>';
$string .= '<a class=\'mleft\' href=\''.Url::to(['category/update', 'id' => $data->cat_id]).'\'><span class="glyphicon glyphicon-pencil"></span></a>';
return $string;
}
}
],
],
]);
$details = $details->getModels();
foreach ($details as $detail) {
?>
<div class="modal fade" id="<?= $detail->cat_id ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel"><?= $detail->category_name ?></h4>
</div>
<div class="modal-body">
<?php
echo Html::beginForm(Url::to(['category/details', 'id' => $detail->cat_id]), 'post', ['id' => 'popup']);
echo Html::beginTag('div', ['class' => 'form-group']);
echo Html::activeLabel($detail, 'cat_description');
echo Html::activeTextarea($detail, 'cat_description', ['class' => 'form-control']);
echo Html::endTag('div');
echo Html::beginTag('div', ['class' => 'form-group']);
echo Html::activeLabel($detail, 'link');
echo Html::activeInput('text', $detail, 'link', ['class' => 'form-control']);
echo Html::endTag('div');
echo Html::beginTag('div', ['class' => 'form-group']);
echo Html::activeLabel($detail, 'resource');
echo Html::activeInput('text', $detail, 'resource', ['class' => 'form-control']);
echo Html::endTag('div');
?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<?= Html::submitButton('Submit', ['class' => 'btn btn-success']) ?>
<?= Html::endForm(); ?>
</div>
</div>
</div>
</div>
<?php
}
Pjax::end();
So how do I keep GridView's Pjax functionality so that the modal still works?

Answer 1

Pjax widget has a formSelector attribute that, by default, will find all forms with data-pjax attribute set to something not falsy.
The easiest way to fix your form is to add that attribute to your form definition:
echo Html::beginForm(
Url::to(['category/details', 'id' => $detail->cat_id]),
'post',
[
'id' => 'popup',
'data-pjax' => 1,
]
);