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.
Related
I am new to javascript and programming in general. I have been working on a web app that solves simple algebraic equations. I am using two libraries, algebra.js and katex.js. How do I use both libraries in my script? I would like to keep this as a client-side application.
I have looked at node.js but my understanding is that node is for server-side development. I have looked at RequireJS but that doesn't seem to handle directories well. Recently I found Enderjs which seems to use npm and allow for client-side development and still make use of require().
What should I use to make a web app like this? Please let me know if there is anymore information that is needed.
The most basic way to do this is to include multiple script tags at the top of your html file. So:
<head>
<script src="path/to/library1.js"></script>
<script src="path/to/library2.js"></script>
<script src="path/to/my/javascript.js"></script>
</head>
<body>
<button onclick="myFunction()">Click me</button>
</body>
This will load more than one onto the page. The order might matter - be wary of which dependencies your chosen libraries have. For example, some will depend on jQuery, so you should load jQuery first then those that depend on it. Order is top down.
In my example, if we pretend library2 depends on library1, then the example would work. However if library1 depended on library2, it would not.
The simplest way is to include the script tags directly in your html file like so (this assumes that you have the algebra.js file in the same folder as your html file):
<script src="algebra.js"></script>
If you are loading the library from the internet you have to use the full web path in the src attribute, for example loading the jQuery library from a cdn (content distribution network):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
Trying to write (copy) a test Angular project in eclipse. Have the the three files from Angular website https://docs.angularjs.org/api/ng/directive/ngController in my eclipse project(which I created as static web project then converted to Angular project). Does not display values correctly. Clear works. Alert etc don't.
Can someone please advise?!
Just copy this link into your head tag:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
also may I ask you why you are using Eclipse and not a more simple editor like notepad++ or sublime? I never heard of an angular.js programmer who uses Eclipse.
Just go the link here and follow the steps in your eclipse. But in my eclipse given CDN in this link does not work. So I changed the CDN server to <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script> .It is work well. May be OK.
I am current making some small JS game in Netbeans and I have started up a PHP project, which seems like the only viable option for a JS project.
I am using an external JS library which is not placed in the same library as my game.
I am not getting any code completion or referencing to this code.
I have tried to include it in the PHP include path, but that does not seems to work.
How can I get back my precious code completion ?
copy the js file to your website root and use it with
<script src=""/>
or
<link href=""/>
and it will work. You can link it to an external source after project is over. Also, using external js files are not recommended. Make sure you are donwloading the development version or the documented development version of the JS file.
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.
I'm doing my very first Visual Web Part in SharePoint 2010 Server, my question is easy i guess but couldn't find the right answer yet, I want to attach my resources files (JS and CSS) using the old way of web development
e.g.:
<script type="text/javascript" src="/_layouts/AnnouncementWebPart/js/jquery-1.6.1.min.js" />
I added my JS files to the Layout mapping folder
Layout-->MyWebPartName-->JSFolder
I did the same for the CSS and then I included them all in the ascx page but nothing really happened when I deployed it to the SharePoint Site!
Whats wrong? i dont want to use the SharePoint Tag for including SharePoint:ScriptLink, is there any chances to do that?
In my case it works both using the script tag or the SharePoint:ScriptLink tag.
You can try to explicitly close the script tag (self-closed can not be supported in some browsers):
<script type="text/javascript" src="/_layouts/AnnouncementWebPart/js/jquery-1.6.1.min.js" ></script>
or you can check from Visual Studio, in the properties of JS files, that the “Build Action” is “Content” and “Deployment Type” is “TemplateFile” (see at the end of this post).
when you set up your SharePoint VS.NET project, did you set it to deploy as Farm? From what I know, the stuff in the layouts folder will be available to all site collections if you deploy to the farm. It's an option when you're setting up where to deploy when you create your SP VS.NET project.