Bootstrap3 Modal不能使用GridView的pjax

Question

我有一個以下的GridView，但不幸的是Bootstrap模式不能正常工作，如果我使用Pjax分頁或搜索。那麼，該模式確實顯示，但它不會提交表單。當我將模式從Pjax（）中移出時，它根本不會被加載。

 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 = '<a href=\''.Url::to(['category/view', 'id' => $data->cat_id]).'\'><span class="glyphicon glyphicon-eye-open"></span></a>'; 
         $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">&times;</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(); 

那麼，如何保持GridView的Pjax功能，使模態仍然有效？

Answer 1

Pjax小部件具有formSelector屬性，該屬性默認情況下會查找所有形式，並將data-pjax屬性設置爲非僞造。

解決您的形式最簡單的方法是給該屬性添加到您的表單定義：

echo Html::beginForm(
    Url::to(['category/details', 'id' => $detail->cat_id]), 
    'post', 
    [ 
     'id' => 'popup', 
     'data-pjax' => 1, 
    ] 
);