Yii2, Javascript不能只在modal中工作

Yii2, Javascript dont work only inside modal

本文关键字：modal 工作 Javascript 不能 Yii2      更新时间：2023-09-26

我使用模态引导我的crud表单，我也使用yii2-ajaxcrud扩展，它扩展了gii生成器的单页crud。

一切正常，保存模型，验证等…然而，我试图使用一个javascript插件:(粘工具包从Leafo)把我的动作按钮放在顶部。当我在modal中访问'create'视图时，发生了以下错误:

"Uncaught TypeError: $ (...) stick_in_parent is not a function."

从索引视图访问'create'视图。当模态打开时，我在chrome检查器中看到了jquery和stick插件的注入。此外，通过ajax crud扩展，我还可以访问由直接URL生成的视图，因此stick插件可以工作。只有在modal中访问视图才会给出错误。

可能是什么?下面是我的主要相关代码:

//namespace app'modules'crm'controllers
 public function actionCreate()
    {
        $request = Yii::$app->request;
        $model = new Classes();  
        if($request->isAjax){
            /*
            *   Process for ajax request
            */
            Yii::$app->response->format = Response::FORMAT_JSON;
            if($request->isGet){
                return [
                    'title'=> "Create new Classes",
                    'content'=>$this->renderAjax('create', [
                        'model' => $model,
                    ]),
                    'footer'=> Html::button('Close',['class'=>'btn btn-default pull-left','data-dismiss'=>"modal"]).
                                Html::button('Save',['class'=>'btn btn-primary','type'=>"submit"])
                ];         
            }else if($model->load($request->post()) && $model->save()){
                return [
                    'forceReload'=>$this->htmlTableContainerId ,
                    'title'=> "Create new Classes",
                    'content'=>'<span class="text-success">Create Classes success</span>',
                    'footer'=> Html::button('Close',['class'=>'btn btn-default pull-left','data-dismiss'=>"modal"]).
                            Html::a('Create More',['create'],['class'=>'btn btn-primary','role'=>'modal-remote'])
                ];         
            }else{           
                return [
                    'title'=> "Create new Classes",
                    'content'=>$this->renderAjax('create', [
                        'model' => $model,
                    ]),
                    'footer'=> Html::button('Close',['class'=>'btn btn-default pull-left','data-dismiss'=>"modal"]).
                                Html::button('Save',['class'=>'btn btn-primary','type'=>"submit"])
                ];         
            }
        }else{
            /*
            *   Process for non-ajax request
            */
            if ($model->load($request->post()) && $model->save()) {
                return $this->redirect(['view', 'id' => $model->ID]);
            } else {
                return $this->render('create', [
                    'model' => $model,
                ]);
            }
        }
    }

视图
// create view
 <div class="panel-body" style="height: 600px">
    <div class="classes-create">
            <?= $this->render('_form', [
                'model' => $model,
            ]) ?>
    </div>
</div>
        $this->registerJsFile('http://leafo.net/sticky-kit/src/sticky-kit.js', ['depends' => ['yii'web'JqueryAsset::className()]]);
        $this->registerJs("$('.panel-heading').stick_in_parent();");

编辑

当模态打开时，视图中生成的实际html。我试图删除jquery的重复包含(在模态和索引中)，我得到了它(与Yii::$app->assetManager->bundles = [' Yii 'web'JqueryAsset' => false，]，…)，但错误持续存在，所以我保留它。

<html lang="pt-BR">
    <body>
        // omitted content, body content of index view, with gridview etc.
        <div id="ajaxCrudModal" class="fade modal in" role="dialog" tabindex="-1" style="display: block;">
            <div class="modal-dialog ">
                <div class="modal-content">
                    <div class="modal-body"><div class="panel">
                        <div class="panel-body" style="height: 600px">
                            // omitted content
                        </div>
                    </div>
                    <script src="/yii2/basic/assets/32e507bc/jquery.js"></script>
                    <script src="/yii2/basic/assets/9f23c46b/yii.js"></script>
                    <script src="/yii2/basic/assets/9f23c46b/yii.validation.js"></script>
                    <script src="/yii2/basic/assets/9f23c46b/yii.activeForm.js"></script>
                    <script src="http://leafo.net/sticky-kit/src/sticky-kit.js"></script>
                    <script type="text/javascript">
                        //$('body').on('load', function(){
                        $('.panel-heading').stick_in_parent();
                        //});
                    </script>
                    </div>
                    <div class="modal-footer"></div>
                </div>
            </div>
        </div>
        <script src="/yii2/basic/assets/32e507bc/jquery.js"></script>
        <script src="/yii2/basic/assets/9f23c46b/yii.js"></script>
        <script src="/yii2/basic/assets/fb64637f/js/bootstrap.js"></script>
        <script src="/yii2/basic/assets/9f23c46b/yii.validation.js"></script>
        <script src="/yii2/basic/assets/9f23c46b/yii.activeForm.js"></script>
        <script src="/yii2/basic/assets/28255cf7/dist/js/bootstrap-dialog.js"></script>
        <script src="/yii2/basic/assets/9f23c46b/yii.gridView.js"></script>
        <script src="/yii2/basic/assets/75fbd502/js/kv-grid-action.js"></script>
        <script src="/yii2/basic/assets/8d08c7cb/jquery.pjax.js"></script>
    </body></html>

你应该使用renderAjax而不是renderPartial，因为renderPartial不加载jquery库

相关文章：