Select2小部件和Pjax Yii2

如何解决Select2小部件和Pjax Yii2

我正在尝试使用Pjax（Yii2中的内置Ajax组件）在Select2中动态添加多个TabularForm小部件。由于某些原因，Select2输入在视图顶部的错误位置渲染（请参见下面的 gif1 ）。据我了解，这个问题与Select2小部件特别相关，因为如果我使用某些默认组件（例如Html :: a（请参见下面的 gif2 ）。

gif1 ：https://i.imgur.com/YMh5dNb.gif

gif2 ：https://i.imgur.com/sJkTDkO.gif

如何使用Select2小部件摆脱这种奇怪的行为？谢谢，谢谢！

控制器：

class ProfileController extends Controller
{
// ...
    public function actionCreate()
    {   
        if (Yii::$app->request->isAjax) { 
            // some logic here ...
            return $this->renderAjax('object/create',[
                // ...
            ]);
        }
    }
// ...

}

查看：

// ...
use kartik\select2\Select2;
use kartik\select2\Select2Asset;

Select2Asset::register($this);

// a bunch of html code

<?PHP Pjax::begin(['id' => 'product-add']); ?>
    $form1 = ActiveForm::begin();
    $attribs = [
        'name' => [
         'type' => TabularForm::INPUT_RAW,'value' => function($productModel) { 
               return Select2::widget([
                   'name' => 'state_10','data' => ['1' => '1','2' => '2'],'pjaxContainerId' => 'product-add','options' => [
                       'placeholder' => $productModel->tmpId,'multiple' => true
                   ],]);
               //return Html::a('product ' . $productModel->tmpId); <- works fine if I use this piece of code
           },],// ...

    Html::a("Add",['profile/create'],['class' => 'btn btn-primary'])

    // ...
    <?PHP ActiveForm::end(); ?>
<?PHP Pjax::end(); ?>

// ...

解决方法

仔细检查后，我找到了解决方案。对于也会遇到相同问题的用户，您需要在pjax响应之前初始化小部件（在我的情况下为Select2），例如在您的控制器中：

class ProfileController extends Controller
{
// ...
    public function actionCreate()
    {   
        if (Yii::$app->request->isAjax) { 
            // some logic here ...

            // initialize the widget with an appropriate id
            $this->view->registerJs("$({$product->tmpId}).select2();"); 

            return $this->renderAjax('object/create',[
                // ...
            ]);
        }
    }
// ...

}

在您的视图中

Select2::widget([
    'id' => $productModel->tmpId,// set your unique id here
    'name' => $productModel->tmpId,'data' => ['1' => '1','2' => '2'],// ...
]);