taurus2790
@taurus2790
Я не программер я только учусъ

Ошибка bootstrap $(...).tab is not a function в шаблоне Bitrix которая возникает через раз. Как понять что не так?

Добрый день, помогите разобраться.

Есть сайт на bitrix. Делаю шаблон и возникает вот какая проблема.

Есть компонент catalog.element у него в script.js вот такой код

script.js

(function (window) {
    'use strict';

    if (window.CatalogElement)
        return;

    window.CatalogElement = function (arParams , ajaxParams) {
        this.params = arParams;
        this.ajaxParams = ajaxParams;

        this.tabs = {
            obTabs: BX('tabs-nav'),
            obTabsScroll: 'tabs-nav-scroll',

            objTopTabNav: {
                description: BX('description-tab'),
                characteristic: BX('characteristic-tab'),
                set: BX('set-tab'),
                video: BX('video-tab'),
                documents: BX('documents-tab'),
                payment: BX('payment-tab'),
                delivery: BX('delivery-tab')
            },

            objScrollTabNav: {
                description: BX('description-tab-fix'),
                characteristic: BX('characteristic-tab-fix'),
                set: BX('set-tab-fix'),
                video: BX('video-tab-fix'),
                documents: BX('documents-tab-fix'),
                payment: BX('payment-tab-fix'),
                delivery: BX('delivery-tab-fix')
            }
        };

        this.error = {};

        this.init();
    };

    window.CatalogElement.prototype = {
        init: function ()
        {
            this.initTabs();
        },

        /* region Tabs  */
        initTabs: function()
        {
            BX.bind(this.tabs.objTopTabNav.description , 'click' , BX.proxy(this.tabSelect, this));
            BX.bind(this.tabs.objTopTabNav.characteristic , 'click', BX.proxy(this.tabSelect, this));
            BX.bind(this.tabs.objTopTabNav.set , 'click' , BX.proxy(this.tabSelect, this));
            BX.bind(this.tabs.objTopTabNav.video , 'click' , BX.proxy(this.tabSelect, this));
            BX.bind(this.tabs.objTopTabNav.documents , 'click', BX.proxy(this.tabSelect, this));
            BX.bind(this.tabs.objTopTabNav.payment , 'click' , BX.proxy(this.tabSelect, this));
            BX.bind(this.tabs.objTopTabNav.delivery , 'click' , BX.proxy(this.tabSelect, this));

            BX.bind(this.tabs.objScrollTabNav.description , 'click' , BX.proxy(this.tabSelect, this));
            BX.bind(this.tabs.objScrollTabNav.characteristic , 'click' , BX.proxy(this.tabSelect, this));
            BX.bind(this.tabs.objScrollTabNav.set , 'click' , BX.proxy(this.tabSelect, this));
            BX.bind(this.tabs.objScrollTabNav.video , 'click' , BX.proxy(this.tabSelect, this));
            BX.bind(this.tabs.objScrollTabNav.documents , 'click' , BX.proxy(this.tabSelect, this));
            BX.bind(this.tabs.objScrollTabNav.payment , 'click' , BX.proxy(this.tabSelect, this));
            BX.bind(this.tabs.objScrollTabNav.delivery , 'click' , BX.proxy(this.tabSelect, this));

            BX.bind(BX('characteristic-link') , 'click' , BX.proxy(this.tabSelect, this));
        },

        tabSelect: function()
        {
            var element = BX.proxy_context;
            $('html, body').animate({ scrollTop: $($(element).attr('href')).offset().top }, 1500);
            $($(element).attr('href')).tab('show');
        },
    };
})(window);



Тут всё просто, есть вот такая панелька
https://yadi.sk/i/46ZN6uH3CIuYdg

И при нажатии страничка прокручивается вниз до табов и открывает нужный таб.

Так вот и проблема в том, что этот функционал живёт своей жизнью (Ещё точно такая же проблема с модальным окном от bootstrap). То работ, то нет. Обновляешь страницу работает, снова обновляешь нет и так всегда, не зависимо от чистки кеша как на сайте так и в браузере. Ошибку пишет простую $(...).tab is not a function

Теперь немного информации.
Бутстрап подключен в файле шаблона header.php
Подключение js css
<?php
    /**Common CSS Files **/
    Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . '/bootstrap/bootstrap.min.css');
    Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . '/css/animate.min.css');
    Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . '/css/hover-min.css');
    Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . '/css/all.min.css');

    /**Common JS Files **/
    Asset::getInstance()->addJs(SITE_TEMPLATE_PATH . '/js/jquery-3.3.1.min.js');
    Asset::getInstance()->addJs(SITE_TEMPLATE_PATH . '/js/bootstrap.bundle.min.js');
    ?>


Настройки у битрикса следующие
Кеширование компонентов - ВКЛ
Управляемый кеш - ВКЛ

Оптимизация CSS и JS
Стояли все галки, но что бы понять что за чем подключается оставил только js сносить вниз
https://yadi.sk/i/IB16Ut2jycC_oQ

Файлы на странице.
https://yadi.sk/i/JHmb4KsmdvhWPQ
Бутстрап выше файла script.js и по идее он должен нормально видеть все функции бутстрапа.

Я пробовал и сбрасывать кеш и отключать кеширование компонента и что только не пробовал.
Всё равно 1 раз нормально 1 раз ошибка. Подскажите что ещё можно проверить?
  • Вопрос задан
  • 789 просмотров
Решения вопроса 1
taurus2790
@taurus2790 Автор вопроса
Я не программер я только учусъ
Короче я не знаю почему так получалось, но когда я со страницы убрал виджет транспортной компании, всё наладилось. Я случайно его убрал и глюк прекратился, ставлю назад и глюк продолжается. Я не знаю почему так ведь в ошибках он не разу не высвечивался, вообщем если будут такие проблемы просто отключите всё и подключайте по очереди всё.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
обычно такое бывает когда скрипт, использующий функцию, загрузился и пытается выполниться раньше чем сама функция
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы