I use Bootstrap studio 5 and I published the website directly from it. When I navigate to it (https://my-website-name.bss.design/) I notice that javascript functionalities are not there. There is an error in the console:
script.min.js?h=fb924772e895278c3c5f2d161d9d0ebd:1 Uncaught TypeError: Cannot read properties of undefined (reading 'addEventListener') at script.min.js?h=fb924772e895278c3c5f2d161d9d0ebd:1:649
It's at the first line but the file only has one line (minified) so this is where the problem is:
document.addEventListener("DOMContentLoaded",(function(){[].slice.call(document.querySelectorAll ...
Somehow document is undefined which makes no sense since that file is loaded at the end of the html body just like it should. Can somehow please tell me what the heck is going on here? I can provide the full script.min.js if necessary.
I didn't try anything since the problem itself makes no sense to me and Bootstrap studio automatically minifies javascript without giving me options.
Related
I built out a demo page using Timeline JS and it works fine within a regular HTML file (See Example Here). However, now that I am using it with ExpressionEngine platform (v 2.9.2), I get a javascript error and the area where the timeline should appear is blank (See Here).
The js error message is "Uncaught ReferenceError: createStoryJS is not defined." I'm not well versed with javascript so I do not know what that means or how to correct it. Please help.
Per RainerJ on Experts-Exchange, I just needed to add the following reference. It works like a charm now
I am getting this error in Chrome's Developer Tools:
Uncaught TypeError: undefined is not a function
This error is referencing this line of my main.js file. These two lines are both causing this error to happen:
jQuery("#signupfrm").fadeToggle('fast',function(){
jQuery("#loginfrm").fadeToggle('fast',function(){
I am getting this error when working on the website on my local computer, but it's from a theme I purchased that has a demo available online.
Here's a working copy of this same template:
https://www.whmcsdesigns.com/demo/cart.php?a=add&pid=1&systpl=flex
Just select "I will use my existing domain and update my nameservers" and enter any domain name. You'll be taken to a page where personal info can be entered. You will see that you have the option to select between "New Customer" and "Existing Customer". It works at the link above.
However, on my local server it's not letting me switch between new and existing. It just gives the error show above and is referencing those lines with signupfrm and loginfrm.
I'm guessing since it's working on the link aboving, those functions must be defined. Can anyone else find where those are being defined at?
Things that I suspect to be the problem:
jQuery hasn't been loaded correctly so the jQuery function can't be performed. It might not have been loading at all or it might be called $, but if other calls to jQuery work it should be OK.
fadeToggle is a part of jQuery so I expect that to work if jQuery is loaded
jQuery("#signupfrm").fadeToggle('fast',function(){
sometimes if you load dynamically and you test on C:\ or whatever local path things don't work the same, especially AJAX calls. Set up a local webserver to work on always, just using localhost on a simple Apache is a good start
Our company site has a JavaScript problem that I'm desperately trying to solve, but really struggling with. My JS skills are good enough to build a site with things like jQuery, but I am not that proficient in debugging - so really appreciate any help.
Seemingly randomly, all JS components (e.g. a jQuery Datepicker) on the page stop working. When force-reloading the page with the error console open, these errors happen about 60% of the time - there doesn't seem to be any pattern to it. The only way to fix the site once this happens is by clearing the cache and reloading.
The Console outputs the following:
Uncaught TypeError: Object #<Object> has no method 'each'
Uncaught TypeError: Object #<Object> has no method 'not'
Uncaught TypeError: Object #<Object> has no method 'each'
However: that's just one example. Other times I will get completely different errors. E.g. a few minutes after submitting this question, I tried again, and got this:
Uncaught TypeError: Cannot call method 'apply' of undefined
Which again was thrown from jquery.min.js - pretty-printed, line 1453 (third line down):
if (g.call(k) === "[object Array]")
if (!u)
e.push.apply(e, k);
I set Chrome to break on all unhandled exceptions, and this was another exception it caught - on line 3 of the minified jQuery library. Shown below is the pretty-printed version:
try {
b.call(c.documentElement, "[test!='']:sizzle")
} catch (f) {
e = !0
}
The actual erroring line begins b.call[...]. This works out to line 1904 of jquery.min.js.
I am using the latest jQuery
This only started happening recently - after changing nothing!
The errors happen seemingly randomly
Usually (but sometimes), no errors are thrown from my scripts - e.g. script.js - usually they are thrown from a minified library. It varies each time.
This seems to happen in all browsers, but more often in Chrome than Firefox
Any ideas where to begin? Unfortunately this is an internal corporate website so providing access is tricky, as we deal with sensitive data throughout the site.
Thank you for your help!
Seems to me that your page is quite big and the browser tries to execute the js code before the DOM loads completely... probably because you're using in-line javascript code..
That could explain the random errors and the fact that you have errors when you force the reload.
I'd suggest you to put your JS code inside a dom ready event so the js code could be executed without problems..
Hope this helps :)
I'm trying to put a Symfony 2 app in production mode. It all runs fine except for the fact that the compressed single JavaScript file causes errors and makes the site unable to render correctly. I found this through the debug console on the browser:
Uncaught TypeError: undefined is not a function
Uncaught TypeError: Object [object Object] has no method 'treeview'
The first error refers to jQuery plug-ins
The treeview refers to a plugin for jQuery which renders a tree like directory structure.
On the other hand, it all runs fine on dev mode cause it doesn't do the compression and it just includes every file one by one. Can someone help me on this one?
I've found a solution to this, it appears the issue is related to missing semi-colons.
When something is the last statement in a js file a semi-colon isn't required however assetic just joins the files together and only adds a new line.
Check the file which is being included just before the broken plugin javascript and make sure it ends with a semicolon.
I'm trying to get the jstree plugin working, following the "Predefined HTML" example on this page: http://luban.danse.us/jazzclub/javascripts/jquery/jsTree/reference/_examples/1_datasources.html
To avoid any conflict with anything else that might be happening, i've tried to get it working in the simplest possible page, in my public dropbox folder: http://dl.dropbox.com/u/846812/jstree_example/jstree_example.html
The only js i've included in my page is jquery and the main jstree file, jsTree/jquery.jstree.js. (The documentation is a bit shaky about what exactly i need to include, but maybe this is the problem). The rest of the files i downloaded are next to jquery.jstree.js, in the jsTree folder.
I've also got my predefined html, a nested list in a div with id="folder_tree".
When the javascript runs, i get an error Uncaught TypeError: Object #<Object> has no method 'delegate', from line 3629 of the jquery.jstree.js file - hopefully you'll see this error too.
Can anyone have a look at the page (the dropbox link above) and see what i'm doing wrong? thanks, max
(note that the file links in that page don't work - they don't need to in order for jstree to work)
jQuery delegate is since version 1.4.2
You are using a older version of jQuery