I am using Laravel for a project, with Laravel Mix compiling my JS and SCSS.
On one of the pages I have a portfolio filter, I want to use Metafizzy's Isotope as it has worked perfect in previous projects.
I included jQuery, followed by the isotope package locally, and finally my main.js file, all of which are before the closing body tag.
I'm using the exact same javascript code from this Codepen Demo in my main.js file: https://codepen.io/desandro/pen/JEojz
However I get the following error in my console:
Uncaught TypeError: $(...).isotope is not a function
I have tried placing my main.js file before and after the isotope package:
<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="/js/isotope.pkgd.min.js"></script>
<script type="text/javascript" src="/js/main.js"></script>
I have also tried installing via npm and adding the following to my main.js file:
var Isotope = require('isotope-layout');
No matter what I do, I get the same error and I'm not sure how to get this working with my Laravel project. Any help would be appreciated.
Looks like I forgot to wrap it in $(document).ready(function() {...})
Related
I have an openlayers with online jquery working, but sometimes I won't have internet access and I'd like to use it offline. I've downloaded the lib but it's not working, I'm sure that it's in the "js" folder, please help me
I'm using nodejs and openlayers
//working
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
//not working
<script src="js/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
//browser error
Error: Bootstrap's JavaScript requires jQuery bootstrap.min.js:6:36
ReferenceError: $ is not defined
it's giving me this error, but with online jquery it's OK
First of all you should install jQuery. Run command below in your project folder to install jQuery:
npm install jquery
You should import it in index.js file:
import {$,jQuery} from 'jquery';
// export for others scripts to use
window.$ = $;
window.jQuery = jQuery;
Based on this post.
Or you should import it to your html:
<script src="node_modules/jquery/dist/jquery.min.js"></script>
If you find the right answer please close the question on other communities(r.g. gis.stackexchange.com) and refer to the answer.
Thanks!
Hope it helps.
I just solved using a local server, don't ask me why it works this way and junt pointing the file path didn't work
first, open a terminal and go to the jquery.min.js folder, then start a simple server (ex: python3 -m http.server 8080)
after, go to the index. html file and add the source
<script src="http://localhost:8080/jquery-3.4.1.min.js"></script>
and now it works offline
I am trying to convert an html project into a vue app.
The original project uses jquery plugin for Revolution slider by adding them via script tag inside html file's body tag and later initializing them:
<script type="text/javascript" src="/static/revolution/js/jquery.themepunch.tools.min.js"></script>
<script type="text/javascript" src="/static/revolution/js/jquery.themepunch.revolution.min.js"></script>
What is the best way to add revolution slider to my vue project?
I have installed jquery via npm and tried to import these scripts into the main.js entrypoint file. I am not familiar with node or npm. Also when app loads, the jQuery is undefined inside these scripts raising errors in the console, which means there is something wrong.
The easiest way is probably to load jquery in the same way (before those two script tags).
Import jQuery into your main.js and then set window.$
import $ from 'jquery'
window.$ = $
That will make it available globally so the scripts can use $ in the standard way.
I'm working on an AngularJS application, and I tried to add Angular Animate.
Angular Route didn't cause any problem, but it seems Angular Animate is not compatible with something in my app.
I load the libs in this order:
<script type="text/javascript" src="../node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="../node_modules/angular-animate/angular-animate.min.js"></script>
<script type="text/javascript" src="../node_modules/angular-route/angular-route.min.js"></script>
And use them in my app.js:
var app = angular.module('tictactoe', ['ngRoute', 'ngAnimate']);
I'm getting the following error. JQuery and Angular (Vanilla + Route + Animate) have been installed with npm
Dependencies versions:
Use angular version 1.6.5 or downgrade angular-animate version to 1.6.4 It'll solve the issue.
Here's a plunk of some angular app example in which this dependency condition can be verified (just change versions of libraries in cdn link)
https://plnkr.co/edit/v0cLmZvYAC8m1J7JdwHf?p=preview
Please downgrade to version angular animate 1.6.4.
Here are the file you should also download it from that link. it works for me.
https://code.angularjs.org/1.6.4/
Also change bower.json (angular-animate/bower.json)
I am new with Angular and Angular 2, and I would like to use the following external lib in my project:
http://angularjs.jqueryrain.com/draw-polygons-image-angularjs-canvas/
To use this lib, I have put the following line in my index.html file before angular:
<script src="./lib/angular-canvas-area-draw.js"></script>
But I have the following error:
Uncaught ReferenceError: angular is not defined
at angular-canvas-area-draw.js:3
at angular-canvas-area-draw.js:234
How should i resolve this problem?
Assuming by your tags, you are trying to use an AngularJs plugin inside an Angular application, that won't work (Or at least it would be pretty hard to get it running by using the upgrade adapter and some zonejs hacking). Try to find the plugin for Angular instead of AngularJs.
But if your tags are misleading and you're using AngularJs than make sure AngularJs in included before the plugin.
<script type="text/javascript" src="./lib/angular.min.js"></script>
<script src="./lib/angular-canvas-area-draw.js"></script>
Move your dependencie into .angular-cli.json file under scripts like this
"scripts": [
....,
"./lib/angular-canvas-area-draw.js"
],
from the latest angulae cli you have to add all external files(css and js) under the script and style tag in the angular-cli.json file
When I run the SpecRunner HTML file I get this error.
Looking around, this is due to angular-mocks.js not being referenced. In my case it is being referenced.
SpecRunner.html:
<link rel="stylesheet" type="text/css" href="lib/jasmine-1.3.1/jasmine.css">
<script type="text/javascript" src="lib/jasmine-1.3.1/jasmine.js"></script>
<script type="text/javascript" src="lib/jasmine-1.3.1/jasmine-html.js"></script>
<script type="text/javascript" src="lib/angular-mocks.js"></script>
<!-- include source files here... -->
<script type="text/javascript" src="../main/static/js/controllers/norm-definitions-controller.js"></script>
When the tests are run, I get this exception: ReferenceError: inject is not defined
I can see that angular-mocks.js is referenced and it's not a caching issue as I can see it using Firebug.
Looking in angular-mocks.js I can see the full reference angular.mock.inject = function() { ... }, I've tried this as a reference too, and get the exception ReferenceError: angular is not defined.
You still need angular.js lib. I didn't saw it among your scripts. It should be before angular-mock.js.
For the errors which come while adding karma and jasmine to testing your project, make sure that
your angular.js and angular-mocks js files both have same versions.
the jasmine version is compatible with angularjs version, refer to jasmine official site to make sure there is no syntax error.
refer to test formation on angular js official site to follow unit testing methodologies.
The above steps help avoid most of the common errors.