openlayers and nodejs jquery not working offline - javascript

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

Related

Metafizzy Isotope Uncaught TypeError

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() {...})

Onsen UI not working in AngularJS project

Im trying to use Onsen with AngularJS but when i call the scripts i have error of 404 not found, this are the scripts that arent working
<link rel="stylesheet" href="onsenui.css"/>
<link rel="stylesheet" href="onsen-css-components.css"/>
<script src="angular.min.js"></script>
<script src="onsenui.min.js"></script>
<script src="angular-onsenui.min.js"></script>
i have installed onsen ui with npm, and i do have it in the node modules, and i have called it in the module too
var app = angular.module('app',['ngRoute','app.routes', 'app.core',
'onsen']);
app.controller('AppCtrl',function(){});
any idea what can i do to make it work?
No need to call this via script tag if you already have installed via NPM.
Take advantage of the module distribution, so you can simply call it with requirejs.
But there is literally gazillion projects on the web. For example this boilerplate can help you.

getting 404 error for bower components

I am trying to run my application using gulp task runner and i have installed few bower components and angular is one of them
When i try to run the application I am getting errors :
In index.html:
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="bower_components/bootstrap-accessibility-plugin/plugins/js/bootstrap-accessibility.js"></script>
<script src="bower_components/mediaelement/build/mediaelement-and-player.js"></script>
<script src="bower_components/angular-socialshare/dist/angular-socialshare.min.js"></script>
I have also included the path but still getting the same errors.
Test 404 error urls from console by run those into the browser. It will ensure that files were available in the location or not.
Use relative path in all files if index.html and bower_components are in same location.
Ex : ./bower_components/jquery/dist/jquery.js
When your angular code start executing, angular does not exist.
AngularJS: Uncaught ReferenceError: angular is not defined
you are trying to access a variable called angular which is not defined.
"Uncaught ReferenceError: angular is not defined".
For this error make sure you have the right version of NodeJS installed with respect to your project.
npm install -g node#7.10.1. whatever version you want after the # symbol.
You can check the version by node -v.
For Bower Components.
bower install .

Laravel Mix + Slick Carousel

I use laravel mix (webpack) to compile my project. Trying to add slick carousel plugin but get an error: Uncaught TypeError: $(...).slick is not a function .
I use .copy() method in webpack.mix.js file to copy from node_modules directory to public directory:
.copy('node_modules/jquery/dist/jquery.min.js', 'public/js')
.copy('node_modules/slick-carousel/slick/slick.min.js', 'public/js')
.copy('node_modules/slick-carousel/slick/slick.css', 'public/css')
.copy('node_modules/slick-carousel/slick/slick-theme.css', 'public/css')
All files successfully appeared in proper public directories and these files are seen in sources tab (in browser inspector).
After I plug slick styles, then jquery (tried several versions), then slick.js in html head. I even used cdn urls.
It's all ok with slick if I do the same without laravel mix.
It doesn't work, I can't understand what's wrong. Please help!
Give a try to change as below:
.copy('node_modules/jquery/dist/jquery.min.js', 'public/assets/js')
.copy('node_modules/slick-carousel/slick/slick.min.js', 'public/assets/js')
.copy('node_modules/slick-carousel/slick/slick.css', 'public/assets/css')
.copy('node_modules/slick-carousel/slick/slick-theme.css', 'public/assets/css')
Reference: https://new.laravel.su/docs/5.4/mix
First npm install slick-carousel
If you are using copy then
mix.copy('node_modules/slick-carousel/slick', 'public/assets/slick');
Or you can just manually copy-paste
In .html file
<link rel="stylesheet" type="text/css" href="/assets/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="/assets/slick/slick-theme.css"/>
<script type="text/javascript" src="/assets/slick/slick.min.js"></script>

How to setup the environment for Angular 2.0?

Taking my initial steps towards Angular 2.0.
First thing is to set up the right environment for the development.
My index.html
<!DOCTYPE HTML>
<html>
<head>
<title>Welcome to Angular 2.0</title>
<!--css-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
</head>
<body>
<div class="container">
<h1> Hello Angular 2 </h1>
<my-app> Loading app component....<my-app>
</div>
<!--js-->
<!-- Polyfills for older browsers -->
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js#0.7.4?main=browser"></script>
<script src="https://unpkg.com/reflect-metadata#0.1.8"></script>
<script src="https://unpkg.com/systemjs#0.19.39/dist/system.src.js"> </script>
<script> window.autoBootstrap = true; </script>
<script src="https://cdn.rawgit.com/angular/angular.io/b3c65a9/public/docs/_examples/_boilerplate/systemjs.config.web.js"></script>
<script>
System.import('app').catch(function (e) { console.log(e); });
</script>
<!--js-->
</body>
</html>
I have copied the content from https://angular.io/docs/ts/latest/guide/setup.html for the following files:-
app.component.ts
app.module.ts
main.ts
NPM is installed & running.
But in order to get the node_modules folders with the required dependencies for the app to run.
What commands do I need to run.
What are the commands that I need to run to set up the Angular 2 environment?
Please note I am new to NPM.
Thanks.
You have angular-cli wich is a good starter point. It will set you everything up according to best practices.
Simple way to set up your first Angular 2 Application.
Download the zip version here.firstAngular2App
Extract it to your destination folder. Assume D:
Open your command prompt(ensure that all required softwares are installed).
Navigate it to the folder. Use the command cd D:\firstAngular2App
Executre npm install
Once it is done use npm start
This way you have your first Angular2 appliction up and running.
npm install in the root project (it will create your node_modules from the dependencies mentioned in package.json file, should have those files as a start)
If you are already using Visual Studio Code as an IDE, you may want to explore how they recommend setting up Angular. I personally found their installation guide painless and feature-rich. I have never walked through an official Angular installation before due to being drenched in jQuery projects. This guide was simple enough to give me a good beginners understanding.

Categories

Resources