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>
Related
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">
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.
I got error like, TypeError: $(...).draggable is not a function.
So, I include jquery like,
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
When I include this api it shows another error like, TypeError: $.browser is undefined
I coudn't find solution. Any suggestion?
$.browser is not support in jquery1.9 anymore. You can try $.version.
Sequence is very important , you need to first load/import JQuery and then only Jquery UI. as below :
'<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>'
Can't seem to figure out why I'm getting the error "Undefined is not a function".
At the end of my body tag, I've got
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script href="/static/js/bootstrap-datepicker.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script>
$('.datepicker').datepicker();
</script>
Any ideas why I'm getting the error? I thought I might be ordering the references wrongly but I reordered them a few different ways with no luck.
I have the following JSFiddle: http://jsfiddle.net/rodneyhickman/NYh2b/1/ I'm trying to set it up to test some Kendo UI DataViz graphs.
I'm getting the following script errors:
Uncaught TypeError: Cannot read property 'msie' of undefined kendo.all.min.js:9
Uncaught TypeError: Cannot read property 'msie' of undefined kendo.dataviz.min.js:10
Uncaught ReferenceError: global is not defined
Any help would be appreciated.
Couple of things. If you are referencing the kendo.all.min.js, you don't need any other .js files, it has all of them included (dataviz, web and mobile). Also you need to include the dataviz.common.css and dataviz.THEMENAME.css (I included default). Also switch back to jquery 1.9.1 and it should work fine.
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
Here is a forked jsfiddle. http://jsfiddle.net/fWG9R/ (I used the latest version 2013.3.1119)
If you want to include other components from web or mobile, you will need to include the kendo.common.css, and kendo.THEMENAME.css, and kendo.mobile.css respectively.