Weird JS libraries issue

HhuskeerJun 30, 2017

Hey,

So i have two header files for two different user states (logged in/out). I'm including my Javascript Files in the header using async and defer, so i can use some of my custom code whenever i require it. jQuery is always included first so that shouldn't be the problem, however once i enter my page's logged in area for some reason almost everything that can go wrong in plugins.js and functions.js screws up.

Here are the js files included in the header that works fine:

And this is how things look in the problematic header:

Here's a copy of my Google Chrome Console:

plugins.js:485 Uncaught ReferenceError: module is not defined
    at plugins.js:485
    at plugins.js:485
(anonymous) @ plugins.js:485
(anonymous) @ plugins.js:485
functions.js:53 Infinite Scroll not defined.
bs-select.js:7 Uncaught ReferenceError: module is not defined
    at bs-select.js:7
    at bs-select.js:7
(anonymous) @ bs-select.js:7
(anonymous) @ bs-select.js:7
functions.js:732 lazyLoad: Appear not Defined.
functions.js:392 lightbox: Magnific Popup not Defined.
functions.js:2155 animations: Appear not Defined.
functions.js:2376 tabs: Tabs not Defined.
functions.js:2433 tabs: Tabs not Defined.
functions.js:2459 tabs: Tabs not Defined.
functions.js:2546 counter: Appear not Defined.
functions.js:2592 roundedSkill: Appear not Defined.
functions.js:2651 progress: Appear not Defined.
functions.js:2843 dribbbleShots: imagesLoaded not Defined.
functions.js:3120 textRotater: Morphext not Defined.
functions.js:2950 carousel: Owl Carousel not Defined.
functions.js:3180 contactForm: Form Validate not Defined.
functions.js:3251 subscription: Form Validate not Defined.
functions.js:3321 quickContact: Form Validate not Defined.
functions.js:3394 stickySidebar: Sticky Sidebar is not Defined.
functions.js:3419 cookieNotify: Cookie Function not defined.
functions.js:3445 extras: Bootstrap Tooltip not defined.
functions.js:3451 extras: Bootstrap Popover not defined.
functions.js:1856 gridInit: Isotope not Defined.
functions.js:1896 filterInit: Isotope not Defined.
functions.js:1930 shuffleInit: Isotope not Defined.
functions.js:2134 parallax: Stellar not Defined.
functions.js:2198 loadFlexSlider: FlexSlider not Defined.
functions.js:517 modal: Magnific Popup not Defined.
timetable.js:608 Uncaught TypeError: el.find(...).magnificPopup is not a function
    at timetableMonth (timetable.js:608)
    at createTimetable (timetable.js:210)
    at Object.success (timetable.js:698)
    at i (jquery.js:2)
    at Object.fireWith [as resolveWith] (jquery.js:2)
    at y (jquery.js:2)
    at XMLHttpRequest.c (jquery.js:2)
timetableMonth @ timetable.js:608
createTimetable @ timetable.js:210
success @ timetable.js:698
i @ jquery.js:2
fireWith @ jquery.js:2
y @ jquery.js:2
c @ jquery.js:2
timetable.js:374 Uncaught TypeError: el.find(...).magnificPopup is not a function
    at timetableWeek (timetable.js:374)
    at createTimetable (timetable.js:206)
    at Object.success (timetable.js:698)
    at i (jquery.js:2)
    at Object.fireWith [as resolveWith] (jquery.js:2)
    at y (jquery.js:2)
    at XMLHttpRequest.c (jquery.js:2)
timetableWeek @ timetable.js:374
createTimetable @ timetable.js:206
success @ timetable.js:698
i @ jquery.js:2
fireWith @ jquery.js:2
y @ jquery.js:2
c @ jquery.js:2
4functions.js:2459 tabs: Tabs not Defined.

I've got no explanation as to what's happening i use almost the same things in both header files. Kangoo.js and Intss.js contain pretty much only AJAX Calls they can't be the problem. Would appreciate if you have any ideas as to what's going on i wouldn't want to go through everything in functions.js and plugins.js you'd know better anyway. Thanks

HhuskeerJun 30, 2017

Ok,

I managed to get to a point with less issues, the gotoTop won't work now however:

Animsition: Element does not exist on page.
Animsition: Does not support this browser.
stickySidebar: Sticky Sidebar is not Defined.

SSemicolon WebSTAFFJul 3, 2017

Hello,

Can you please provide us with a Live URL so that we can check out the exact issue and provide you with a more accurate solution for this. Thanks for your Patience.

Additionally, currently async Functionality is currently not fully supported since Canvas uses the Page Loading Transition Functionality. You will need to disable this functionality by adding the .no-transition Class to the <body> Tag if you want to use async.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.