Uncaught TypeError: $editorModal.modal is not a function

[gagiD]

Everything works fine but when I try to edit picture error above appears.

This line to be precise: jquery.galleryManager.js:130

$editorModal.modal('show');

My code(mainly from example): migration:

<?php

use yii\db\Schema;
use yii\db\Migration;

class m150619_015846_gallery_manager extends Migration
{
    public $tableName = '{{%gallery_image}}';

    public function up()
    {
        $tableOptions = 'CHARACTER SET utf8 COLLATE utf8_general_ci ENGINE=InnoDB';

        $this->createTable(
            $this->tableName,
            array(
                'id' => Schema::TYPE_PK,
                'type' => Schema::TYPE_STRING,
                'ownerId' => Schema::TYPE_STRING . ' NOT NULL',
                'rank' => Schema::TYPE_INTEGER . ' NOT NULL DEFAULT 0',
                'name' => Schema::TYPE_STRING,
                'description' => Schema::TYPE_TEXT
            ), $tableOptions);
    }

    public function down()
    {
        $this->dropTable($this->tableName);
    }
}

model:

public function behaviors()
    {
        return [
           // ...
            'galleryBehavior' => [
                'class' => GalleryBehavior::className(),
                'type' => 'work-item',
                'extension' => 'jpg',
                'directory' => Yii::getAlias('@webroot') . '/uploads/work-gallery',
                'url' => Yii::getAlias('@web') . '/uploads/work-gallery',
                'versions' => [
                    'small' => function ($img) {
                     /** @var \Imagine\Image\ImageInterface $img */
                        return $img->copy()->thumbnail(new \Imagine\Image\Box(150, 100));
                    },

                    'medium' => function ($img) {
                     /** @var Imagine\Image\ImageInterface $img */
                        $dstSize = $img->getSize();
                        $maxWidth = 800;
                        if ($dstSize->getWidth() > $maxWidth) {
                            $dstSize = $dstSize->widen($maxWidth);
                        }
                        return $img->copy()->resize($dstSize);
                    },
                ],
            ],
            // ...
        ];
    }

controller:

public function actions()
    {
        return [
           'galleryApi' => [
               'class' => GalleryManagerAction::className(),
               // mappings between type names and model classes (should be the same as in behaviour)
               'types' => [
                   'work-item' => WorkItem::className()
               ]
           ],
        ];
    }

view(_form.php):

<?php 
        if ($model->isNewRecord) {
            echo 'Can not upload images for new record';
        } else {
            echo GalleryManager::widget(
                [
                    'model' => $model,
                    'behaviorName' => 'galleryBehavior',
                    'apiRoute' => 'work/galleryApi'
                ]
            );
        }
    ?>

[zxbodya]

It looks like bootstrap javascript is not loaded on your page

[gagiD]

Yes. Tnx :+1:

I just added:

BootstrapPluginAsset::register($this);

And it's ok. Why BootstrapPluginAsset isn't dependency?

[ghost]

error showing combogrid is not a function

<?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;
use dosamigos\datepicker\DatePicker;
use kartik\typeahead\TypeaheadBasic;
use kartik\typeahead\Typeahead;
use yii\helpers\Url;
use app\models\Drivers;
use yii\web\JsExpression;

 ?>
<script src='<?= Url::to('@web/js/combogrid/jquery/jquery-1.9.1.min.js') ?>'></script>
<script src='<?= Url::to('@web/js/combogrid/jquery/jquery-ui-1.10.1.custom.min.js') ?>'></script>
<script src='<?= Url::to('@web/js/combogrid/plugin/jquery.ui.combogrid-1.6.3.js') ?>'></script>
<link rel="stylesheet" href='<?= Url::to('@web/js/combogrid/css/smoothness/jquery-ui-1.10.1.custom.css') ?>' type="text/css">
<link rel="stylesheet" href='<?= Url::to('@web/js/combogrid/css/smoothness/jquery.ui.combogrid.css') ?>' type="text/css">

 <div class="drivers-form" style="height:100px; >

 <div class="row">

   <div class="col-md-4">

     <?php $form = ActiveForm::begin(); ?>

     <?php echo  $form->field($model, 'name1')->widget(TypeaheadBasic::classname(), [
               'data' => $data1,
               'dataset' => ['limit' => 10],
               'options' => ['placeholder' => 'Filter as you type ...'],
               'pluginOptions' => ['highlight'=>true],
           ]);   //id=driver-name1
     ?>
</div>
<div class="col-md-3"></div>
<div class="col-md-4">
     <?php
            echo $form->field($model, 'name2')
            ->widget(TypeaheadBasic::classname(), [
               'data' => $data2,
                'dataset' => ['limit' => 10],
               'options' => ['placeholder' => 'Filter as you type ...'],
               'pluginOptions' => ['highlight'=>true],
           ]); //id=driver-name2
     ?>

</div>
<div><input id="cg"/></div>
 </div>
  <?php ActiveForm::end(); ?>
</div>

<?php

$url=Url::to('Drivers/mydata');
$script = <<< JS

// $("#drivers-name1").combogrid({
//
// debug:true,
// searchButton:true,
// resetButton:true,
// url: '$url',
// colModel: [{'columnName':'id','width':'10','label':'id'},
// {'columnName':'first_name','width':'45','label':'title'},
// {'columnName':'last_name','width':'45','label':'last_name'},
// {'columnName':'phone','width':'10','label':'phone'},
// {'columnName':'email','width':'10','label':'Email'}],
// //"select item" event handler to set input field
// select: function( event, ui ) {
// $( "#project" ).val( ui.Drivers.first_name );
// return false;
// }
// });

$(function(){
      $('#cg').combogrid({
        panelWidth:600,
        url: 'Drivers/mydata',
        idField:'id',
        textField:'first_name',
        mode:'remote',
        fitColumns:true,
        columns:[[
            {field:'id',title:'ID',width:40},
            {field:'first_name',title:'First Name',align:'left',width:100},
            {field:'last_name',title:'Last Name',align:'left',width:100},
            {field:'email',title:'Email',align:'left',width:250},
            {field:'phone',title:'Phone',width:100}
        ]]
    });

});

JS;
$this->registerJs($script);
?>

[zxbodya]

@ganeshbharadwaz you comment is not related to the extension at all, please do not make comments like this. about your error - looks like you have issues with scripts loading order (it looks like $('#cg').combogrid is executed before the appropriate library is loaded. use registerJsFile view method instead of rendering script tag directly to prevent such errors)

[zxbodya]

And it's ok. Why BootstrapPluginAsset isn't dependency?

to make it possible to use this extension without requiring to use bootstrap extension

[ghost]

Thank you