I am having some trouble getting started with using javascript files on my website (A Flask application). I start the website by running run.py which looks like this:
#!flask/bin/python
from app import app
app.run(debug=True)
In my html page I have the following code which gives a 404 error:
Error message:
My file structure looks like this:
Any hints to where I'm going wrong?
Ah yes, luckily I am currently developing a flask application at the moment.
You are currently missing the static folder which by default flask looks into, a folder structure something like this:
|FlaskApp
----|FlaskApp
--------|templates
- html files are here
--------|static
- css and javascript files are here
Two important default folders that Flask will look into templates and static.
Once you got that sorted you use this to link up with your javascript files from your html page:
<script src="{{url_for('static', filename='somejavascriptfile.js')}}"></script>
Plus - A good article to read but not super related but it talks about the folder structure of flask is this: https://www.digitalocean.com/community/tutorials/how-to-deploy-a-flask-application-on-an-ubuntu-vps
So your index.html is at app/templates/index.html, and your jQuery is at app/javascript/jQuery.js right?
I think your path is wrong. Try this:
<script src="../javascript/jquery.js"></script>
Try using src="app/javascript/jquery.js".
Also, I noticed you include jquery.js twice - on line 7 and 28.
Here is what helped me eliminate the jquery part of my Flask project
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
This was taken straight from Basic Template found in http://getbootstrap.com/getting-started/
Related
First of all I'm not skilled with JavaScript, I know basics but JS nowadays gets really confusing and for someone that is not in "JS loop" finding correct info is hard.
The question is:
I want to use google protocol buffers in web browser. The problem is that I can't load it into browser due to issue with:
ReferenceError: Can't find variable: require Global Code — js_pb.js:11
As far as I know this is nodejs function.
js_pb.js is generated class from proto file by protoc using commonjs --js_out=import_style=commonjs,binary.
So I googled and it seams like systemjs or requirejs is the way to go (to load nodejs javascript into web browser).
Added this to the html:
<!-- Load system js -->
<script src="./system.js"></script>
<script src="./extras/named-register.js"></script>
<script src="./extras/amd.js"></script>
<script src="./extras/use-default.js"></script>
<script type="systemjs-importmap">
{
"imports": {
"google-protobuf": "./google-protobuf.js"
}
}
</script>
<script type="systemjs-module" src="./js_pb.js"></script>
<script>
<!-- var message = new proto.poc.MsgPoc(); -->
<!-- import {proto.poc.MsgPoc} from './js_poc_pb.js'; -->
Unfortunately <script type="systemjs-module" src="./js_pb.js"></script> also return issue with required missing.
My question is:
How to properly use systemjs to load that java script into web browsers without need of packaging or bundling JS ?
or more general question
How to load java-script that contains nodejs functions (require etc.) into web-browser without packaging all dependences into single JS (bundle like webpack)?
Thanks for reply in advance
Regards
I'm a newbie in web development in Google Apps Script and I'm having a hard time trying to run a simple webapp which is supposed to set up a menu example by using SlickNav jQuery Plugin. I successfully set it up as a GAS library (you can see the source code here). That plugin requires jQuery 1.7 onwards, so I've also set up jQuery (v2.1.0) as a GAS library (click here to see the code).
After importing both of them as libraries:
in my webapp, it works like a charm in dev. mode:
but in production mode, it throws
"ReferenceError: undefined "jQuery". (line 1, file "slicknav.js", project "slicknav")"
I've spent 3 days trying to make this example running. Am I missing something on this example? What could it be wrong? Can somebody here point me in the right direction?
Thanks in advance.
You cannot use JQuery inside of Apps Script as Apps Script since GAS does not have a DOM to manipulate.
If you wish to use JQuery, or any other JavaScript library inside your web app you need to add it with a <script> tag. Such as adding <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> inside your <head> or below your <body> tags.
Google even has a set of hosted libraries that you can include in your web app: https://developers.google.com/speed/libraries/
If you don't want to use a CDN service (like the google hosted libraries) you can copy/paste the source into a new GAS html file, and include that in your web app.
Example:
jquery.html
<script>
//Paste jquery.min.js here
</script>
index.html
<html>
<head>
<?!= HtmlService.createHtmlOutputFromFile('jquery').getContent(); ?>
</head>
</html>
After Clarification:
JQuery needs to be loaded before slicknav, since it requires it. It looks like you are, but that's the error it's throwing. I would start by simplifying your process and using script tags with CDN hosted libraries and see if that works. Then try including the files in your current project and see if that works...etc Try and isolate the problem in that manner.
It's also good to note than when deploying, you HAVE to update the version to apply and development changes.
I want to add the CDN-hosted Firebase Javascript file to my application based on ng-boilerplate.
I tried just adding it to vendor_files in build.config.js, but it isn't included in the output index.html - maybe because it can't find the file locally?
The application works if I add it to the index.html template directly, but that's unclean and breaks the tests.
Is there a way to add external files to ng-boilerplate or modify the Gruntfile to add them?
According to the docs,
the vendor_files.js property holds files to be automatically
concatenated and minified with our project source files.
so that won't work. According to Kato's link, it's still under consideration for v0.4.
Have you looked into angularfire?
As for having the files hosted from firebase cdn, add the following right after (or before) the google plus script:
<script src="//cdn.firebase.com/v0/firebase.js"></script>
<script src="//cdn.firebase.com/libs/angularfire/0.5.0/angularfire.min.js"></script>
I'm new to Angular, I'm building a demo app to learn, it's something very basic, but it's working, but I'd like to know how to divide this app in different files without having to write a script tag for every file.
Lets say I have my files structured like this:
Scripts/
angular.js
----App/
-----app.js(main app module)
----Factories/
-----factoryOne.js
-----factoryTwo.js
----Controllers/
-----controllerOne.js
-----controllerTwo.js
----Routes/
-----routes.js
And in my main view I just want to have
<script src="Scripts/angular.js"></script>
<script src="Scripts/app/app.js"></script>
Is there a way to do this? like include in Java or using in C#, thanks for the help guys.
Personally use Grunt for tasks like this. You can find details for this particular one # https://npmjs.org/package/grunt-contrib-concat + https://npmjs.org/package/grunt-usemin. These script tags will will be in your source, but your dist version will have a single one.
This will all be set up for you if you start your project using Bower.
You should check out RequireJS. With it, at most you will only have 2 script tags, RequireJS and your main app script. Angular will be loaded as a dependency of your app fragments that need it.
I've been playing around with AngularJS - which is a kick-ass front end framework by the way.
Today I tried to incorporate the angular-seed starter app (found here: https://github.com/angular/angular-seed) into a currently existing Rails 3.1.3 application.
Had a few issues getting the demo code - here: http://docs.angularjs.org/#!/tutorial - to work in the asset pipeline, so just for testing purposes I put them into the public folder - old school style.
I followed the tutorial and had all of my views, controllers, services set up correctly. However, when I included the js files at the bottom of my index page:
<script src="angular/app/lib/angular/angular.js" ng:autobind></script>
<script src="angular/app/js/services.js"></script>
<script src="angular/app/js/controllers.js"></script>
... none of the controllers would work. I would get the {{ model.property }} tags within my templates instead of the actual output.
No Javascript errors in Chrome's dev tools - and network and resources showed all expected files loaded properly.
I thought that maybe I had overlooked something in my code, but when I looked at the developers guide, there is a link to angular's cdn:
<script src="http://code.angularjs.org/angular-0.9.19.min.js" ng:autobind></script>
Just for the heck of it, I replaced my local angular.js script call with the cdn, and suddenly everything was working as expected.
I double checked, to make sure that I was loading the local copy from the proper directory, and I was - it's the standard directory that comes with the angular-seed file. This file was also showing as a resource that was downloaded properly.
Anyone have ideas on why the cdn worked but the local copy would not?
The angular-seed uses AngularJS 1.0.0rc5 (currently) which is incompatible with 0.9.19. Check out how the seed app is wired. (e.g. remove ng:autobind and add ng:app or ng-app to the html tag in your layout template).
Looks like you are using an old version: You want to read this: http://docs.angularjs.org/#!/guide/dev_guide.bootstrap.auto_bootstrap
What you should be doing is using the new version, and the docs are here: http://docs-next.angularjs.org/guide/dev_guide.bootstrap.auto_bootstrap
For one thing, you're missing a double-quote in your first script reference.