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>
Related
I am recreating a javascript game which requires tables, but when I link my javascript file to my index.html the grid does not show on my browser, but when I directly add my javascript inside the script tag in my html, the grid shows on the browser.
Any help would be appreciated thank you!
This is my code by referencing a js file inside html(the tables do not show)
html with js link
This is my code without referencing a js file(tables do show)
html without js link
This is my main.js
main js
This is the browser without linking js file
browser without js file
This is my browser with linking js file
browser with js reference
First I linked the js file with script src=js path but it did not work but it worked when I put the javascript directly inside the html script tag. I was wondering how I can make it work with referencing a separate js file for a cleaner html code.
It's due to that your local paths are not resolving correctly. Without seeing directory structure I can't know what could be wrong.
First of all, please re-check and verify that both files main.js and index.html are in the same directory.
Alternatively, you could create folder called js inside of your main directory (where index.html is) and then move the main.js into that folder and try:
<script type="text/javascript" src="/js/main.js"></script>
index.html and main.js files must be at the same directory in order to include .js file as you did
<script type="text/javascript" src="main.js"></script>
UPDATE (I will leave answer whole, if somebody also gets stuck, so they can troubleshoot the problem):
The reason why it couldn't resolve path is because there was blank spaces between src and = ; when giving src, that part needs to be connected.
Just like this
<script type="text/javascript" src="main.js"></script>
Take a look here:
What happens:
I am attempting to use a javascript chessboard here: http://chessboardjs.com/ . Unfortunately, I don't know javascript or CSS, and am rusty in HTML, so I don't understand the documentation, even though this seems to be a standard javascript chessboard.
How exactly does one install and use this package in order to render a chessboard? The "examples" are all snippets of HTML or javascript, useless to me without being embedded in a working web page. And the source to sample web pages do not work when copied to my home directory. For example, the web page http://chessboardjs.com/examples/1000 here purports to render and empty board, and does on their server, but when I copy the source to my local directory, only a blank page renders. The source of that page does not make sense to me anyway, for example, it refers to files "js/chessboard.js" and "js/json3.min.js" , neither of which are in the distribution. (Nor does the render work when "chessboard.js" is replaced with the name of the javascript file in the distribution).
I assume the issue has something to do with where img files are searched for, and where files are stored. And presumably these are so obvious to javascript experts that it's all implicit in this package and aren't ever explained in the documentation.
So, what I would like is a file foo.html that, when copied to my local machine, will render a chessboard using the chessboard.js source.
Create a new text file, and paste this inside:
<!DOCTYPE html>
<html>
<head>
<title>Chess</title>
<link rel="stylesheet" href="css/chessboard-1.0.0.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="js/chessboard-1.0.0.min.js"></script>
</head>
<body>
<div id="board1" style="width: 400px"></div>
<script>
var board1 = ChessBoard('board1', 'start');
</script>
</body>
</html>
Then save it with the .html or .htm extension.
Next, download their distributable from their download page. And unzip the folder.
Next, put your HTML file in the same folder as the js, img, and css folders from the unzipped distributable.
Double click/Run the HTML file. The URL should say file:///C:/path/to/the/file.html.
You should see
I am creating an asp.net MVC application.
I have a view named "receive" and it placed in Views/Main folder.
I am trying to add js file.
In intellisense, I am getting access to js file functions.
But when I run the application, the js file is not linking.
My view is as follow
#model dSite.Models.MModels
<script type="text/javascript" src="../../Scripts/Jquery-2.1.js"> </script>
<script>
$("#btn").click(function ()
{ alert("aa");
});
</script>
#{
ViewBag.Title = "receive";
}
<h2>
receive</h2>
<input type="text" id="txtname" placeholder="enter name" />
<input type="button" id="btn" value="click here" />
And my Scripts folder is at the root.
How can I link my js file to my view? I have tried the above but it's not working
following is the file structure
Js files structure
Firstly jquery is being loaded! You would have seen a $ is not defined error in the browser console if it wasn't.
The real problem was that you have the following script at the top of the page but not inside document.ready.
<script>
$("#btn").click(function () {
alert("aa");
});
</script>
What happens is as the view is rendered, the first line of the script is trying to attach a .click() event to the element with id="btn", but at this point that element does not exist in the DOM (its further down the page) so the you actually attaching the event to an undefined element (one that does not exist).
Unless you place your scripts immediately before the closing </body> tag, you should always wrap your scripts in $( document ).ready()
Use the built in MVC bundling on your css and js files.
In your App_Data/BundleConfig.cs do this:
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
Replace your script tag in your view with this:
#Scripts.Render("~/bundles/jquery")
Update your script tag to this:
<script type="text/javascript" src="#Url.Content("~/Scripts/Jquery-2.1.js")"></script>
I believe in MVC 4+ (Razor 2) you can simplify this to
<script type="text/javascript" src="~/Scripts/Jquery-2.1.js"></script>
The tilde gets translated into your web application's root path so that you can specify paths relative to that.
When a view is created and rendered all scripts are published in a folder Scripts at the root of your website so when you reference a script you must reference this folder. The scr atribute of the script references a absolute or relative url. Those can be referenced directly with a string or you can use the framework to generate one for you.
Check Absolute urls, relative urls, and...? to learn more about absolute and relative urls.
Some examples of the above using a string to reference the script's address
<script type="text/javascript" src="/Scripts/Jquery-2.1.js"></script>
<script type="text/javascript" src="~/Scripts/Jquery-2.1.js"></script>
<script type="text/javascript" src="http://mysite/Scripts/Jquery-2.1.js"></script>
You can also use url helpers like #Url.Content("~/Scripts/Jquery-2.1.js") and you will get an url generated by the framework acording to your defined routes.
<script type="text/javascript" src='#Url.Content("~/Scripts/Jquery-2.1.js")'></script>
I personaly recommend you that you use the MVC bundling and minification feature that will come handy in a production enviroment. This is located inside the BundleConfig.cs and you will have to specify which files you want to be generated.
bundles.Add(new ScriptBundle("~/bundles/myscript").Include("~/Scripts/myscript.js"));
Where myscript points to the javascript file you want to include and later reference it using
#Scripts.Render("~/bundles/myscript")
This will generate a script tag like the one you are using.
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.
I am interested in using the jQuery tablesorter but somehow am unable to.
I have followed the instructions and have placed jquery.js and the tablesorter.js in the same folder as my templates (the folder where the html file is). Unfortunately, when trying to access the .js files, it keeps hitting a 404, which I'm assuming means that the files are not on the correct path.
Any ideas for this fix?
Does django have a special place to place these js files? (not in the templates folder?)
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript" src="jquery.tablesorter.js"></script>
<script type ="text/javascript">
$(document).ready(function()
{
$("#myTable").tablesorter();
}
);
The myTable is the same exact table as the one in the examples
Usually jquery, js, css, images and most of other static contents are handled as static files and not as django templates. Read managing static files docs.
For jQuery, you can use Google API :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
And for Django, Did you configure a path for your scripts/médias etc... ? (in settings.py maybe ?)
To add to what others have written, if you want to make JQuery available throughout your site/app and you don't like external dependencies such as Google you can do the following:
Download the latest "compressed, production" JQuery at https://jquery.com/download/ - for example, on the command line in your static directory (might be <projectname>/static): wget https://code.jquery.com/jquery-2.1.3.min.js
Add a reference to load JQuery in your site's "base" template file (might be <projectname>/<appname>/templates/base.html) - for example: Add <script src="{% static 'jquery-2.1.3.min.js' %}"></script> in the <head> section
Test the JQuery installation by adding something like the following to one of your templates:
<script type="text/javascript">
$(document).ready(
function(){
$("#jqtest").html("JQuery installed successfully!");
}
);
</script>
<p id="jqtest"></p>
If necessary/usual after making template updates, restart your Django server, then load a page which uses the template with the test code