Jquery bxslider exception - javascript

Alright so the problem is basically unknown for me, never had it before.
I tried adding bxslider today but it seems it doesnt work properly. I tried using the other version of the JS that he provided but same thing happends, the images keep on "loading" and they never load. I did inspect element and this is what I got
jQuery.Deferred exception: Cannot read property 'indexOf' of undefined
TypeError: Cannot read property 'indexOf' of undefined
at jQuery.fn.load (file:///C:/Users/Oploditelj/Desktop/domaci_last/js/jquery-3.0.0.js:9612:12)
at HTMLImageElement. (file:///C:/Users/Oploditelj/Desktop/domaci_last/js/plugin/jquery.bxslider.min.js:10:4394)
at Function.each (file:///C:/Users/Oploditelj/Desktop/domaci_last/js/jquery-3.0.0.js:359:19)
at jQuery.each (file:///C:/Users/Oploditelj/Desktop/domaci_last/js/jquery-3.0.0.js:152:17)
at HTMLImageElement. (file:///C:/Users/Oploditelj/Desktop/domaci_last/js/plugin/jquery.bxslider.min.js:10:4355)
at Function.each (file:///C:/Users/Oploditelj/Desktop/domaci_last/js/jquery-3.0.0.js:359:19)
at jQuery.each (file:///C:/Users/Oploditelj/Desktop/domaci_last/js/jquery-3.0.0.js:152:17)
at g (file:///C:/Users/Oploditelj/Desktop/domaci_last/js/plugin/jquery.bxslider.min.js:10:4295)
at c (file:///C:/Users/Oploditelj/Desktop/domaci_last/js/plugin/jquery.bxslider.min.js:10:4180)
at d (file:///C:/Users/Oploditelj/Desktop/domaci_last/js/plugin/jquery.bxslider.min.js:10:2570)
undefined
The code that Im using is exactly the same as the one that was on their website.
<head>
<script type="text/javascript" src="js/jquery-3.0.0.js"></script>
<script src="js/plugin/jquery.bxslider.min.js"></script>
<link rel="stylesheet" type="text/css" href="js/plugin/jquery.bxslider.css"/>
<script type="text/javascript" src="js/skripta.js"></script>
</head> <!-- Head ends -->
and of course Im calling it inside separate .js file
$(document).ready(function() {
$('.bxslider').bxSlider();
});
and the body is
<body> <!-- Body start -->
<ul class="bxslider">
<li><img src="js/plugin/images/pic1.jpg"/></li>
<li><img src="js/plugin/images/pic2.jpg"/></li>
<li><img src="js/plugin/images/pic3.jpg"/></li>
</ul>
</body><!-- Body ends -->

The issue is about jQuery version 3.0 and compatibility with bxslider.js. And this issue was arised by jQuery .load() function. You have to change bxslider.js's one line to solve this issue. Open your bxslider.js file and find .load() function's code line. It was used only 1 time in bxslider.js, so the necessary change is:
From
$(this).load();
To
$(this).trigger('load');

There's a pull request on github that solves this:
https://github.com/stevenwanderski/bxslider-4/pull/1024
I'd recommend you test it out.

Related

Why there exist error Uncaught ReferenceError: $ is not defined if add async?

My index like this :
...
<html >
<head>
...
<script src="/scripts/myapp.min.js"></script>
<script src="/scripts/myapp-themming.min.js"></script>
</head>
<body class="header-static">
<div class="page-container">
<!-- this is call header, navigaton, content, footer -->
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="/Content/assets/script/jquery-ui.min.js"></script>
...
<script type="text/javascript">
...
</script>
<script>
$(document).ready(function () {
...
});
</script>
</body>
</html>
If I test pages speed using gtmetrix. And gtmetrix recommendation for Defer parsing of JavaScript. So I try to add async like this :
<script src="/scripts/myapp.min.js" async></script>
<script src="/scripts/myapp-themming.min.js" async></script>
it showing following error,
Uncaught ReferenceError: $ is not defined
If I using defer, it make 3 error like this : Uncaught ReferenceError: $ is not defined, Uncaught TypeError: $(...).material_select is not a function, and Uncaught TypeError: $(...).select2 is not a function
How can I solve this error?
First move the two scripts in the <body> into the <head> section at the top (above the 3 dots you have added). This is what #Nijin Koderi meant.
The important thing is making sure that jQuery is ABOVE everything else so it is loaded first.
Secondly - you can't just use async as mentioned in the other answer I gave as you will end up with a race condition.
The reason you get less errors with async is purely down to load speed of resources, you will find that with enough loads you will get different errors depending on which scripts download the fastest.
It is much easier while you are learning this to use defer (in fact I nearly always use defer unless you are loading megabytes of JS or your site needs JS within milliseconds to work)
To quote the answer I gave
The easiest way [to defer parsing of JavaScript] is to add defer
attribute to each JavaScript request.
For better performance (difficult) I would recommend using async
instead as this will start downloading sooner and activate each Script
as soon as it is available.
However this often causes issues with 'race conditions' where scripts
may load out of order (i.e. if you are using jQuery and another script
loads before it that needs jQuery you will get an error).
Try defer first and if performance is good use that.
You have two errors as mentioned above, Uncaught ReferenceError: $ is not defined, Uncaught TypeError: $(...).material_select is not a function, and Uncaught TypeError: $(...).select2 is not a function
the first problem can be resolved by adding the following js file on the top before any other js as shown below
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
...
<script src="/scripts/myapp.min.js"></script>
<script src="/scripts/myapp-themming.min.js"></script>
Next Error is for select2. For resolving this issue,add the following stylesheet and js file after jquery.min.js
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js">

Uncaught ReferenceError: body is not defined

I'm wiring up a CMS (Craft) to a site built by another developer, and sorting through the problems that entails. Right now the big one is that i'm getting a "body is not defined" js error every time the page resizes. Specifically:
Uncaught ReferenceError: body is not defined
at init.js:54
at dispatch (jquery-2.0.0.min.js:4)
at y.handle (jquery-2.0.0.min.js:4)
Example at: http://pollinator.creativeforthepeople.org
I'm loading the libraries in the right order, and I tried loading jquery from google, which also didn't help.
Any ideas?
Thanks,
Clay
Look at this screenshot from your site. http://prntscr.com/ewxc4i
You need to change this code in init.js on line 54 from:
if($(body).hasClass(no-touch) & $(window).width() > 992) {
to:
if($('body').hasClass(no-touch) & $(window).width() > 992) {
You need to set keyword body inside quotes.
To js just body looks like a variable name. So it doesn't find where this variable has been declared.
So try
$('body')
instead
Use $('body') or $(document.body)
Besides, note that your scripts are included after the closing </html> tag
</div>
</body>
</html>
<a id="back-to-top"><i class="fa fa-angle-double-up"></i></a>
<script src="P2/js/jquery-2.0.0.min.js"></script> <!-- Jquery Library Call -->
<script src="P2/vendor/prettyphoto/js/prettyphoto.js"></script> <!-- PrettyPhoto Plugin -->
<script src="P2/js/helper-plugins.js"></script> <!-- Helper Plugins -->
<script src="P2/js/bootstrap.js"></script> <!-- UI -->
<script src="js/custom-js.js"></script>
<script src="P2/js/init.js"></script> <!-- All Scripts -->
...
you should move them inside body

$ is not defined lightgallery

For some reason my lightgallery is not working. I added it the same way I always do and all javascript files are included after Jquery.
I get this message in the console:
Uncaught TypeError: $ is not a function
at product-1.html:433
(anonymous) # product-1.html:433
Which points to:
<script type="text/javascript">
$(document).ready(function($) {
$("#lightgallery").lightGallery();
});
</script>
All files are correctly loaded, I checked in the network tab.
What could be the problem and how can I fix it? Maybe there is a conflict somewhere? Can I wrap it in a function to make it work?
My js files:
in the head
<link href="https://cdn.rawgit.com/sachinchoolur/lightgallery.js/master/dist/css/lightgallery.css" rel="stylesheet">
your html content
<div id="lightgallery">
<a href="img/img1.jpg">
<img src="img/thumb1.jpg" />
</a>
<a href="img/img2.jpg">
<img src="img/thumb2.jpg" />
</a>
</div>
in the body include light gallery js files after jquery
<script src="https://cdn.rawgit.com/sachinchoolur/lightgallery.js/master/dist/js/lightgallery.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-pager.js/master/dist/lg-pager.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-autoplay.js/master/dist/lg-autoplay.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-fullscreen.js/master/dist/lg-fullscreen.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-zoom.js/master/dist/lg-zoom.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-hash.js/master/dist/lg-hash.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lg-share.js/master/dist/lg-share.js"></script>
<script>
lightGallery(document.getElementById('lightgallery'));
</script>
This really works for me.
Clearing browser cache may help sometimes. Or narrow down your problem by loading one by one starting with jquery.
This solves the problem :
<script>
lightGallery(document.getElementById('lightgallery'));
</script>
1.Check your maps api js link like https://developers.google.com/maps/api/js this is correct or not
2.Press Ctrl+Shift+Del button at a same time and clear caches and cookies

Sliding in Panel - JQuery Conflict

I am trying to add into my website (Magento Store) a slide in panel (https://codyhouse.co/gem/css-slide-in-panel/) and I am getting issues when including the JQuery.js file. It complains about not finding a particular function for other extensions. The result I could only find is that it is a common issue called JS conflict. I am newbie and any help will be appreciated.
List of errors:
prototype.js:5653 Uncaught TypeError: element.attachEvent is not a function
extendedreviews.js:14 Uncaught TypeError: $j(...).hoverIntent is not a function
prototype.js:5653 Uncaught TypeError: element.attachEvent is not a function
somesome.com/:777 Uncaught TypeError: $j(...).foundation is not a function
prototype.js:5734 Uncaught TypeError: element.dispatchEvent is not a function
I am including the JS for this panel in head file as
<script type="text/javascript" src="js/slidein/modernizr.js"></script>
<script type="text/javascript" src="js/slidein/jquery-2.1.1.js"></script>
<script type="text/javascript" src="js/slidein/main.js"></script>
Note that, before these 3 includes, there are many other JS included for third party extensions. The errors are related to files for these third party extensions
Try to add these Cdn's.I hope these will work fine.
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

blogger.com function load uncaught referenceerror $ is not defined

My javascript is loaded before on a blogger template here: http://fashioncherry.blogspot.no/ I've also tried to make sure it is only loaded once by adding the code:
function loadAdlinkAd(){
if( !adlinkAdLoaded ){
adlinkAdLoaded=true;
Before the post footer () I've added the code:
<a class='adlink-stylemag-btn' href='http://stylemag.no'> <img alt='stylemag' height='150' src='http://adlinkmedia.no/wp-content/uploads/2013/09/STYLEmag_knapp_150x150.png' width='150'/> </a>
<script type='text/javascript'>loadAdlinkAd();</script>
I tried the same thing on http://www.camillaabry.com/ and it worked great there. So I cannot understand why I get the uncaught referenceerror $ is not defined. I'm also a newbie when it comes to this, so I'm not sure how to fix it...:-(
$ is the variable jQuery is normally stored under. Include the jQuery library before you initialize the code that throws the error and it will probably work fine.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Categories