Yii2, Javascript dont work only inside modal

Hello, I am using modal bootstrap for my crud forms and I am also using the yii2-ajaxcrud extension, which extends the gii generator for a single page crud.

Everything is workimng correctly, saving the models, validation, etc … However, I’m trying to use a javascript plugin: (sticky-kit from Leafo) to stick my actions buttons at the top. Happens that when I access my ‘create’ view in modal the following error occurs:


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

From the index view I access the ‘create’ view. When the modal opens I see in the chrome inspector the injection of jquery and the stick plugin. Moreover, with the ajax crud extension I can also access the views generated by direct URL (without modal), and thus the stick plugin works. Only accessing the view in modal is giving the error.

What could be?

Below is my main related code.




//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('the javas cript file link', ['depends' => [\yii\web\JqueryAsset::className()]]);


$this->registerJs("$('.panel-heading').stick_in_parent();");



PS.: I cant post links for now.

No one?

I think the issue here is that you can’t garantie that stick_in_parents will run after the lib is loaded. Even more so as it is served remotely. I should probably use .on(‘event’, …) and in my ajax call success trigger that event. I tried $(‘body’).on(‘load’, function() but no effect, same for the opened modal event. Is strange, because raw Jquery code like console.log($(’#input’).val()) works (while code inside url script not) . The plugin script works only if I use the jquery ‘getscript’, but this will not be good in another cases (like plugins that modify the appearence of elements)

The $(…).modal is not a function is usually caused because scripts are loaded in the wrong order . The browser will execute the scripts in the order it finds them.

For example, bootstrap depends on jQuery , so jQuery must be referenced first. So, you must called the jquery.min.js and then bootstrap.min.js like the following:

<script src="/jquery-3.3.1.min.js"></script>
<script src="/bootstrap.min.js"></script>

Multiple jQuery instances

Sometimes this warning may also be shown if jQuery is declared more than once in your code. The second jQuery declaration prevents bootstrap.js from working correctly. The problem is due to having jQuery instances more than one time. Take care if you are using many files with multiples instance of jQuery. Just leave one instance of jQuery and your code will work.