Как исправить переключение между табами?

Question

[Александр]

Не работает переключение (Tab navigation) между табами (прикрепляю фото)

У меня есть проблемные вещи (все что связано с "Clipart" ) как только я это всё комментирую, то сразу навигация работает, не могу разобраться в чем может быть причина.

Некоторые участки кода настроек:

</div>
        </div>
        <div class="tab-pane " id="tab_template_settings">
            <?= $this->render('template_settings', ['model' => $templateSettings]); ?>
        </div>
        <div class="tab-pane " id="tab_setting_order_statuses">
            <?= $this->render('setting_order_statuses', ['model' => $model, 'settingOrderStatuses' => $settingOrderStatuses]); ?>
        </div>
        <div class="tab-pane " id="tab_setting_tag">
            <?= $this->render('setting_tag', ['model' => $model, 'companyTags' => $companyTags]); ?>
        </div>
        <div class="tab-pane " id="tab_settings_clipart">
            <?= $this->render('settings_clipart', ['model' => $model, 'clipart' => $settingsClipartForm]); ?>
        </div>
    </div>
</div>
</div>

            <a href="#tab_setting_tag" data-toggle="tab" aria-expanded="false"></a>
        <li class="">
            <a href="#tab_setting_clipart" data-toggle="tab" aria-expanded="false"></a>

Код проблемной модели:

use common\models\traits\MainCompanyClipartTrait;
use Yii;
use yii\db\ActiveRecord;

/**
 * This is the model class for table "main_company_clipart".
 * @property int $id
 * @property int $card_image_id
 * @property int $card_icon_id
 * @property int $search_product_icon_id
 * @property int $search_product_image_id
 * @property int $authorisation_icon_id
 * @property int $authorisation_image_id
 * @property int $empty_orders_icon_id
 * @property int $empty_orders_image_id
 * @property int $empty_favorite_icon_id
 * @property int $empty_favorite_image_id
 * @property int $empty_notifications_icon_id
 * @property int $empty_notifications_image_id
 */
class MainCompanyClipart extends ActiveRecord
{
    use MainCompanyClipartTrait;

    public static function tableName()
    {
        return '{{%main_company_clipart}}';
    }


    public static function findOrCreate($id)
    {
        $companyClipart = self::findOne(['main_company_id' => $id]);
        if (!$companyClipart) {
            $companyClipart = new MainCompanyClipart(['main_company_id' => $id]);
            $companyClipart->save();
        }
        return $companyClipart;
    }

    public function rules()
    {
        return [
            [['main_company_id'], 'required'],
            [['main_company_id', 'card_image_id', 'card_icon_id', 'search_product_icon_id', 'search_product_image_id', 'authorisation_icon_id', 'authorisation_image_id', 'empty_orders_icon_id', 'empty_orders_image_id', 'empty_favorite_icon_id', 'empty_favorite_image_id', 'empty_notifications_icon_id', 'empty_notifications_image_id'], 'integer']
        ];
    }

Файл settings_clipart:

<div class="main-company-setting_order_statuses">
    <?php $form = ActiveForm::begin([
        'action' => ['main-companies/settings-save'],
        'id' => 'main_company_id',
    ]);
    ?>

    <?php foreach ($imagesModel

                   as $imageModel) { ?>

        <div class="form-group image-uploader" id= <?= $imageModel['id'] ?>>
            <?= $form->field($clipart, $imageModel['column'])->hiddenInput([
                'data-url' => Url::toRoute([$imageModel['url_update']]),
                'data-id' => $clipart->id,
            ])->label(false); ?>


            <?= Html::label($clipart->attributeLabels()[$imageModel['column']]); ?>
            <div class="form-group image-uploader" id="<?= $imageModel['id'] ?>">

                <?= $form->field($clipart, $imageModel['column'])->hiddenInput()->label(false) ?>

                <?= Html::label(Yii::t('app', $imageModel['label'])) ?>

                <?= ImageInput::widget([
                    'name' => $imageModel['column'],
                    'id' => $imageModel['id'],
                    'nameField' => $imageModel['attribute'],
                    'modelName' => 'MainCompanyClipart',
                    'options' => [
                        'accept' => 'image/*',
                    ],
                    'pluginOptions' => [
                        'maxFileCount' => 1,
                        'initialPreview' => null,
                        'uploadUrl' => Url::to(['/media/upload']),
                        'deleteUrl' => Url::toRoute([
                            '/media/delete',
                            'model_id' => $clipart->id,
                        ]),
                        'uploadExtraData' => [
                            'fileKey' => $imageModel['column'],
                            'resourceType' => $imageModel['id']
                        ],
                    ],
                ]);
                ?>

            </div>
        </div>
    <?php } ?>
    <div class="form-group">
        <?= Html::submitButton('Save', ['class' => 'btn btn-primary']); ?>
    </div>
    <?php ActiveForm::end(); ?>
</div>

Всё что хотите просмотреть из файлов пишите в комментариях, всем заранее спасибо.

Comments

[Михаил Ливач]

переключение табов - это JS. Варианта я вижу два:
1) код, связанный с "Clipart" , содержит сломанный JS и на фронтенде ломает заодно и табы.
2) код, связанный с "Clipart", кривой и из-за него почему-то не выводится JS, который обспечивает работу табов.
Смотрите консоль браузера, смотрите инспектор.

[Сергей delphinpro]

https://qna.habr.com/help/rules

3. В процессе создания вопроса пользователь Сервиса обязан:
3.8. Использовать для демонстрации фрагментов кода только специальный тег < code > или специальные демонстрационные ресурсы.