I am new in jQuery, so I need some help. I downloaded jQuery latest version from jquery.com.
I saved this as a text file as jquery.js. Then I keep my html code & jquery.js in the same folder.
When I run my code my jQuery code function doesn't work, but when I used jQuery from Google in my code it works very good
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
So please help me to get out my problem.
My code is given below:
<!DOCTYPE html>
<html>
<head>
<script src="javascript/jquerymin.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide("slow",function(){
alert("The paragraph is now hidden");
});
});
});
</script>
</head>
<body>
<button>Hide</button>
<p>This is a paragraph with little content.</p>
</body>
</html>
I guess you have a 404 error when loading javascript/jquerymin.js.
I save this as a text file as jquery.js. Then I keep my html code & jquery.js in same folder
This means that you have to change this:
<script src="javascript/jquerymin.js"></script>
into this:
<script src="jquery.js"></script>
Your application files will look like this:
site-root
├── index.html
└── jquery.js
if you are working on windows, make sure file extension isn't hidden (which is default behavior for windows platform). if the extension is hidden then Windows Operating system automatically adds extension to the file name you have given. for example, if you saved a file as "jquerymin.js" then the file has actually been saved as "jquerymin.js.txt".
Make sure you have the file jquerymin.js inside the javascript folder.
May be it is a typo,
You have used jquerymin.js for including jquery
Usually the jquery min file come with below name
jquery.min.js
So,
Check your file name whether it is jquerymin.js or jquery.min.js
and as your src="javascript/jquerymin.js" it should be in a javascript folder inside root
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'm trying to replicate this jsfiddle project on my local machine
I have copied the exactly displayed contents of the index.html, script.js, and style.css files on my local machine. Although my local files didn't initially work the desired way (displaying song length, title, etc).
So I added these lines to the top of the html file, so that my script.js file would be linked. I also added a line to my html file so that my downloaded jquery file would be recognized. With these lines added to my html file:
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript" src="script.js"></script>
But when loading my index.html file into my browser, I can choose a file just fine, but none of the javascript content is displayed. I don't think my script.js file is being recognized, because even If I add console.log() lines to the script.js file, they aren't displayed.
How do I ensure my script.js file is correctly linked so that this jsfiddle project works on my local machine the same way it works on jsfiddle?
thank you
You can use cdn
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Or if you download the file you have to be sure where is this file in your project
<script src="project/jquery.min.js"></script>
You can try this.
You need to make sure you have jquery downloaded locally or use a CDN in your html file. See below.
Also, make sure you have your script.js in the same folder of your index.html or point to the file correctly.
<script src="https://rawgit.com/moment/moment/2.2.1/min/moment.min.js">
</script>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>
<script type="text/javascript" src="script.js" defer></script>
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 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.
There is a javascript on an external webpage that downloads a file. Can I pass a URL to a local script to download this automatically? Simply using http://webpage.com/javascript:theScript() doesn't seem to work, even when I type it into a browser. I'm very much novice in this space, be gentle! Thanks in advance.
This is too little info to tell you exactly how to do it (or even if it can be done at all). But what I can tell you:
http://webpage.com/javascript:theScript() cannot work the way you expect. The URL needs to locate a file, so if webpage.com was hosting a file named exactly `javascript:theScript()', then your browser would download the contents of this file and display it.
If the function you want to call resides in a javascript file, lets say, functions.js (URL: http://webpage.com/functions.js), then you can include this file in your own webpage and call functions from there.
This is where the special javascript: notation comes to place: It's a workaround to allow you to specify a javascript function in a regular <a href...> tag.
File: functions.js
function theFunction() {
alert ("Hey there!");
}
File: yourpage.html
<html>
<head>
<script type="text/javascript" src="http://webpage.com/functions.js">
</script>
</head>
<body onload="theFunction();">
Your text<br>
Click here
</body>
</html>
If this doesn't help you out, then you should post some code (ie. contents of the file containing the function to call, how you want to include the function in your page etc).
To include a script:
<script type="text/javascript" src="http://www.example.com/script.js"></script>
To execute code from the script you'll need a separate script tag:
<script type="text/javascript">
theScript(); //where theScript is a function defined in script.js
</script>
You should look at some tutorials for JavaScript. I recommend w3schools.