Adding Jquery to root folder in my server (localhost) - javascript

I am learning web development and I have no idea where to place jquery.js file on my localhost server. Do I just save it as such /var/www/jquery.js and then reference it with:
<script type="text/javascript" src="jquery.js">?
Will that work or is there a particular place that is called a root folder on localhost server that I don't know about...Sorry for how dumb this sounds..

Just put it anywhere, and include a <script> tag that embeds it, e.g. <script type="text/javascript" src="/some/location/in/my/webroot/jquery.js"></script>.

bob,
Its always good to maintain nice heirarcy structure
do as below
Create a separate folder for js , which is javascript and place all of them there
root/js/jquery.js
and you can include
/js/jquery.js
This should be good
either you can include from google cdn also , so that you can have better performance
http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js
reference here
http://softwareas.com/google-jquery-cdn

You can place it anywhere you want as long as the includes contains the proper path.
If you place it here:
/www/ajax/jquery.js
Your includes would look like this:
<script type="text/javascript" src="/ajax/jquery.js"></script>
BTW: /www/ is your "web root"
EDIT:
I'd also place my JavaScript includes and scripts at the end of my body section...
Click here to read about script location and performance.

Related

How to get the coffeescript working in Play framework 2.3.1?

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.

Google app engine python doesn't read js file

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.

linking code from a separate document to work on another page

I have taken script from a webpage document I have made and I have saved onto a notepad document with the extension .js.
I would like to now know how I can reference this .js file from the current page that I have created so that the script will run on that page without the actual code being there, just the reference link.
Something like this?
<script type="text/javascript" src="myfile.js" />
It must be a reference link. There are other techniques besides the standard, but they all rely on linkage. You can't beat the linkage. You can't stop the linkage. You mus succumb to the linkage.
That's not how the web works? You might be able to use some sort of developer tool to execute arbitrary javascript from a file when the page loads, but that would just be overriding the default way the web works.
you will need to do :
<script type="text/javascript" src="URI_TO_DIR/extension.js"></script>
see this page about embedding a javascript file
if script is on your computer, it will of course not be accessible on the web, for that you'd need a webserver or a webspace
You can include an external JavaScript using a script tag with a src attribute. For example, something like
<script type="text/javascript" src="javascriptfile.js"></script> should do what I think you're asking for.

Sharing JS files across multiple Apps (for local and production)

Say I have the following structure for 3 different apps that live on 3 different domains, and a personal "cdn" where I can put files that are common across all three apps:
root/
/dinosaureggs.com
/magicalapples.com
/wizardsupplies.com
/mypersonalcdn.com
/js
/php
/css
This same structure is mirrored on a local and production environment.
If I'm in dinosaureggs.com and I want to use a shared PHP library in the /php folder I can say:
require('/../mypersonalcdn.com/php/library.php')
This works fine on both the local and production servers.
However, it won't work for JS because JS includes can't back out of the "app" with paths the same way PHP can.
I can't say:
<script type="text/javascript" src="/../mypersonal.cdn/js/library.js"></script>
Now, on live I could say:
<script type="text/javascript" src="http://mypersonalcdn.com/js/menus.js"></script>
But this doesn't solve my problem for local environment (at least to the extent that I wish to leave it truly locally and have the option to develop offline).
Any suggestions?
Each app has to provide it's own copy of the JS library, either that or put them in your CDN.
You can't go up from your webroot because there is nothing there, so make sure it's available within your webroot, either because it's there or by a rewrite that forwards the request to a PHP script that will find the JS file and return it's contents.
For local devopment, why can't you just use the html file scheme for src paramaters.
For example, (I'm making up the directory where your root folder is located here, change it)
<script type="text/javascript" src="file://Users/bob/projects/root/mypersonalcdn.com/js/menus.js"></script>
You can modify your php file like this:
<?php if ($_SERVER['SERVER_NAME'] == "localhost") { ?>
<script type="text/javascript" src="path/to/your/library.js"></script>
<?php } else { ?>
<script type="text/javascript" src="http://mypersonalcdn.com/js/menus.js"></script>
<?php } ?>
It's a common way to deal with such problems.
While the PHP to fetch JS method above was ok, this was a much more straightforward solution that I eventually landed on:
Serving files outside of doc root / having common client files across multiple domains
To do this you set a mod_alias in http.conf
On local environment that looked like this:
Alias /shared/ "/Users/Jane Doe/Sites/shared"
<Directory "/Users/Jane Doe/Sites/shared">
Options Indexes MultiViews
Order allow,deny
Allow from all
</Directory>
This makes it so you can call a css (or image or js or whatever) like this:
But instead of looking in /shared/ on that domain, it'd go to wherever on the server you had "shared" pointed to; in this case: /Users/Jane Doe/Sites/shared/
Resources:
Serving images from outside of document root
http://httpd.apache.org/docs/2.0/mod/mod_alias.html#alias

Can a single javascript file be used by multiple html files?

I have a javascript file main.js and five html files 1.html,2.html,3.html,4.html,5.html
I want to access the javascript file main.as in all files .
I have used in all of the five but I'm not able to access it . Is it possible to share the .js file among the html files.
Plz reply,
Thanks in advance
Prashant Dubey
Yes, it is entirely possible. That's the point of being able to have a JS file instead of having to embed all the code in the HTML.
yes this is well possible. You merely have to include
<script type="text/javascript" src="main.js"></script>
in your HTML files, preferably near the bottom (for faster rendering). What have you done so far?
Yes. Totally possible.
Just reference it in all of the files e.g. by
<script type="text/javascript" src="Scripts/main.js"></script>
Yes, it is possible.
Probably there is something wrong with the way you access the javascript from your html. Show us the <script ...>...</script> part of your html.
Yes. Are you using the correct path to the main.js file in your html files?
Create separate javascript file with .js extension with all your function in it and
just include this javascript file in the head tag of all the html scripts u wanna use that in.
Like::
<html>
<head>
<script type="text/javascript" src="JavaScriptFilePath.js"></script>
</head>
<body>
<!-- use javascript -->
It can happen both ways..
a single html file can use multiple javascript file
2.a javascript file can be used in several html files.
In first case javascript file load can be conditional based on location, user preferences, time, age group, content restriction.
You can see good example when facebook loads its page. I loads number of javascritps.

Categories