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

Question

[Андрей Еськов]

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

Есть сайт на 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 раз ошибка. Подскажите что ещё можно проверить?

Comments

[sochi-russia]

Непонятны вот эти строчки $($(element).attr('href'))
$($(element).attr('href'))

[sochi-russia]

Да и еще проверьте у вас может еще в шаблоне где прописаны jquery и bootstrap

[Андрей Еськов]

Берём данные атрибута href у объекта по которому был клик, чтобы дальше открыть одноимённый tab

$($(element).attr('href')).tab('show');

[Андрей Еськов]

По идее правильно подключены, сначала jqery затем bootstrap, а патом только мой скриптик и по скрину видно, что всё так https://yadi.sk/i/JHmb4KsmdvhWPQ.

Уже несколько раз всё проверил. Ещё заметил что баг появляется чаще если страницу открывать в новой вкладке)))) блин не пойму что за бред)

[sochi-russia]

Андрей Еськов, Попробуйте все расширения закрыть у браузера

[WhiteBearDev]

Андрей Еськов, очень похоже на то, что у Вас не успевает подгрузиться bootstrap.bundle.min.js. Оберните содержимое script.js в $(document).ready(){};

[Андрей Еськов]

WhiteBearDev, я слабоват в js можно такую конструкцию оборачивать, когда я оборачиваю получаю ошибку.

Uncaught ReferenceError: CatalogElement is not defined

У меня вот так выглядит файл

(function (window) {
    'use strict';

    if (window.CatalogElement)
        return;

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

Когда оборачиваю выглядит вот так

$( document ).ready(function() {
    (function (window) {
    'use strict';

    if (window.CatalogElement)
        return;

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

Или я не правильно это делаю? И ещё проблема в том, что ошибка то есть то нет))

[Андрей Еськов]

WhiteBearDev, А когда в шаблоне я вызываю эту функцию тоже обернуть не получается

$( document ).ready(function() {
        var product = new CatalogElement(<?=CUtil::PhpToJSObject($jsParams, false, true)?> , {
            path: '/bitrix/components/bitrix/catalog.element/ajax.php',
            params: {
                AJAX: 'Y',
                SITE_ID: "<?= SITE_ID ?>",
                PRODUCT_ID: "<?= $arResult['ID'] ?>",
                PARENT_ID: "<?= $arResult['ID'] ?>"
            }
        });
    });

Тогда все рушится

TypeError: $(...).slick is not a function
TypeError: this.carousel.objMainImage.slick
Uncaught TypeError: $(...).owlCarousel is not a function

[Андрей Еськов]

WhiteBearDev, Я кстати пробовал даже просто в шаблоне написать тот же код, с ожиданием загрузки, на чистом jquery в 1 строку, всё равно проблема остаётся.

[WhiteBearDev]

Андрей Еськов,

Uncaught ReferenceError: CatalogElement is not defined

Очень странно, что у Вас возникает такая ошибка. В какой строке?

Answer 1

[Андрей Еськов]

Короче я не знаю почему так получалось, но когда я со страницы убрал виджет транспортной компании, всё наладилось. Я случайно его убрал и глюк прекратился, ставлю назад и глюк продолжается. Я не знаю почему так ведь в ошибках он не разу не высвечивался, вообщем если будут такие проблемы просто отключите всё и подключайте по очереди всё.

Answer 2

[Владимир]

обычно такое бывает когда скрипт, использующий функцию, загрузился и пытается выполниться раньше чем сама функция

Comments

[Андрей Еськов]

я попробовал отключить вообще тот файл, и просто прям в файле шаблона сделал просто обработку 1 кнопки с отложенной загрузкой

$(document).ready(function(){
        $('#characteristic-tab').on('click', function () {
           $($(this).attr('href')).tab('show');
        });
    });

Всё равно ругается $(...).tab is not a function но при этом сами табы бутстрапа работают, не работает только мой вызов.