I built a python app on google app engine that pulls pictures from the flickr API and allows users to do cool stuff with the pictures, like drag and drop.
I have three JS files in the body:
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery-ui-1.10.4.custom.min.js"></script>
<script src="js/init.js"></script>
My jQuery code is working fine but only when I write it in either of the jQuery documents. If I place the code in the init.js, the code simply doesn't work, which I find rather weird. I put the code in the jquery files because I wrote console logs on the three script files and only the init.js didn't print to the console. I am linking the files correctly and referring to the right folder and right file. The folder JS was also added to the app.yaml:
- url: /js
static_dir: js
I can just leave the code in the jQuery file but this is not what I am supposed to do. I want to fix it.Is there a specific way to use the JS file on google app engine?
Use absolute paths instead of relative when loading your JS files (add the leading slash /):
<script src="/js/jquery-1.11.0.min.js"></script>
<script src="/js/jquery-ui-1.10.4.custom.min.js"></script>
<script src="/js/init.js"></script>
I fixed it. The problem was that I named the file init.js. For some reason Firefox doesn't like that name (at least mine didn't) and didn't load the file. Chrome loaded the file without any problems. When I changed the file name to main.js, it started working in Firefix as well. I only tried this when I had exhausted all other possible options though. Such a weird behavior of Firefox.
Related
I am trying to add this bootstrap theme to my project http://ironsummitmedia.github.io/startbootstrap-creative/ this theme have 4 js files beside jquery and bootstrap.
I added jquery and bootstrap to my project, This 4 files are in the compatibility folder, as Metereor doc said, but It did not work. The navbar effect when scroll down the page is not working and I sometimes(If I leave the .js files name untouched) got an error about fitText.js file.
PD1: Compatibility folder loads the .js files in alphabetical order.
PD2: I tried a lot of suggestions that I found, here in stack and meteor forums but nothing happen.
I put css and less files in client/lib/stylesheet and they seens to be ok.
What can I do to make this theme to work in meteor.?
Thanks.
NOTE:
JS Files
1.jquery.easing.min.js
2.jquery.fittext.js
3.wow.min.js
4.creative.js
I place them with creative theme load order
You have two primary options:
Create a meteor package. If you do a nice job of this then you might wish to share it with the community via atmosphere.js and github so that everyone else can take advantage of your work.
Put your theme's .js files under /public then create a file somewhere in your /client directory tree called head.html that doesn't include any <template name="foo"> directives. Instead just include the directives you want in the <head> section of all your pages bracketed by <head> and </head>. Refer to your .js files from that section of html.
The <head> section is also useful for establishing your google SEO codes and also your google webmaster tools verification code.
I found a solution that works perfect. I hope it could help other people,
I use jquery and .rendered to load the scrips after the page is fully rendered and all the effects I wanted to use where available
Template.layout.rendered = function() {
$('head').append('<script type="text/javascript" src="/javascript/jquery.easing.min.js"></script>');
$('head').append('<script type="text/javascript" src="/javascript/jquery.fittext.js"></script>');
$('head').append('<script type="text/javascript" src="/javascript/wow.min.js"></script>');
$('head').append('<script type="text/javascript" src="/javascript/creative.js"></script>');
}
There is no need to provide the reference of stylesheets in the meteor. Just put your CSS file in client/stylesheets folder. Meteor will automatically apply these CSS rules.
And the same goes with JS as well.
I am following the "Using Play Framework with scala" tutorial. I am able to follow all the steps except the last one to use the coffeescript with jquery. I can see the javascript file getting generated, but in the browser, I am seeing this error
"ReferenceError: $ is not defined".
I am new to javascript and coffeescript,
here is my coffeescript code:
and here is the javascript as shown in the browser console
is there some syntax issue that can cause the problem? Help appreciated.
I am attaching the image, if indentation could be one of the reasons for this to fail.
add this line (depending on your version of jQuery)
<script src="#routes.Assets.at("javascripts/jquery-1.11.2.js")" type="text/javascript"></script>
to the <head> </head> section in app/views/main.scala.html .
For me, this template is loading for every page. but first you need to download jQuery and add it to your javascripts folder (under public).
In Play 2.3: Note the lib/jquery/jquery.js path. The lib folder denotes the extract WebJar assets, the jquery folder corresponds to the WebJar artifactId, and the jquery.js refers to the required asset at the root of the WebJar.
So just add
<script type="text/javascript" src="#routes.Assets.versioned("lib/jquery/jquery.js")"></script>
to the <head> </head> section in app/views/main.scala.html.
basic javascript, now everything seems crystal clear.
Just one line to include jquery in the index.scala.html to include jquery plugin.
I´m having a headache last two days with Google App Engine and JQuery.
I try to implement the jQuery in the html file and I created de handler in app.yaml, but still does not work. This worked with my css and images, but I´m stuck with the JavaScript.
I also tried to do the same page without Google App Engine AND WORKED!! Why the same code does not work when I display it in my localserver ????
Here goes my app.yaml handler:
- url: /js
static_dir: static_files/js
My call in the html:
<script type="text/javascript" src="/static_files/js/jquery.js"</script>
<script type="text/javascript" src="/static_files/js/script.js"></script>
and the jquery itself:
$(document).ready(function() {
$("#ingles").fadeOut(1000);
});
I know that the javascript code works fine, and I suppose the html call is correct. Maybe the mistake is in the app.yaml? Many thanks!
You have declared your static URL to be /js but in your HTML you are requesting /static_files/js. You should use just /js there too.
The way to start debugging issues like this is by trying to go to the location mentioned in the link, and seeing if that works.
I got so confused loading JavaScript in Google App Engine. I am using the Django template.
First, in my base HTML file, I can't load my downloaded jQuery code from local say, d:/jquery.js, like
<script src="d:\jquery.js" type="text/javascript" ></script></head>,
This line is in my base HTML file. It works when I load jQuery from remote. Like
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"type="text/javascript" ></script></head>
I don't know why.
Second, I can't load my own-created JavaScript code to my HTML file. Say I create a JavaScript file, like layout.js, and I try to load it like this in my child HTML file, which, by the way, inherits from the base HTML.
<body><script src="layout.js" type="text/javascript"></script></body>
And it doesn't work at all. The only way it works I have tried is when I put the actual JavaScript code in the body of my base HTML file. Like
<body><script>
$(document).ready(
$("#yes").click(function() {
$("#no").hide("slow");
}));
</script>
I don't know why either... How do I fix it?
AppEngine doesn't know anything about paths on your local system; it will only upload files that you configure it to. Do this by having a line like this in your app.yaml file:
handlers:
- url: /js
static_dir: js
In this case, /js represents a subdirectory of your main project directory, and you can put all of your static JavaScript files in there. They will be uploaded to the production server, and you can include them in your HTML with:
<script src="/js/jquery.js" type="text/javascript" ></script>
Let's get directly to the problem :
I'm actually doing a firefox extension in which i would like to implement the jWebsocket API in order to build a small chat.
I got my main script file, named test.js, and the jWebsocket lib into a js folder.
Just for you to know, this is my first firefox extension ever.
So in my XUL file I got this (for the script part only of course, the interface code is not shown) :
<overlay id="test-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript" src="chrome://test/content/test.js" />
<script type="application/x-javascript" src="chrome://test/content/js/jwebsocket.js" />
jwebsocket.js being the file I need to call according to jWebsocket website.
In my main script file test.js I start with :
if (jws.browserSupportsWebSockets())
{
jWebSocketClient = new jws.jWebSocketJSONClient();
}
else
{
var lMsg = jws.MSG_WS_NOT_SUPPORTED;
alert(lMsg);
}
jws being the namespace created into the jwebsocket.js file.
Of course I've got the required stand-alone server running in background, and working.
So from what I understood looking on various websites, is that if a js file is loaded into the javascript allocated memory space (with the tag), all namespace/function should be available between each file. But this was mostly for HTML-oriented issues, so I'm not sure if it applies to XUL/Firefox environment.
But the script keep failing at the first jws call.
Any ideas on what goes wrong here ? I'm stuck for 2 days now :/
Yes, is the same of HTML developing, you have your namespace avaiable between each XUL file.
Take a look here for namespacing in firefox extensions.
What error do you get?
Edit:
Do you have initialized your jws object before to call browserSupportsWebSockets() ?
Like Pointy said, you need to load test.js after your jwebsocket.js file.