I would need help on attaching my .js document to my html document so that jQuery works on it, at the moment only normal JS is working.
This is the html document header (called "3i.html"):
<!PROCTYPE <!DOCTYPE html>
<html>
<head>
<title>3i.com</title>
<link rel="stylesheet" type="text/css" href="3i.css">
<script type="text/javascript" src="3i.js"></script>
</head>
The javascript file is called "3i.js".
Javascript commands like "alert" or "prompt" work fine, I just can't find a way to make jQuery code work.
Help is very much appreciated
Include the jQuery library and your .js file just before closing the body.
<!DOCTYPE html>
<html>
<head>
<title>3i.com</title>
<link rel="stylesheet" type="text/css" href="3i.css">
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script type="text/javascript" src="3i.js"></script>
</body>
</html>
Related
I have a PHP based website. I need to add a JavaScript code in to the head. I would like to include the code in to a small JavaScript file and call it from within PHP page. The code starts with <script type="text/javascript"> and ends with </script>. So I tried to save the code in to code.js and in the head of my website's PHP code I put <script type="text/javascript" src="code.js" /> but it didn't work. I am wondering what am I doing wrong?
The content of the PHP page is as follows:
<!DOCTYPE HTML>
<html>
<head>
<title>title of the page</title>
<link href='http://fonts.googleapis.com/css?family=Ropa+Sans' rel='stylesheet' type='text/css'>
<!--head-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<!----start-wrap---->
<div class="wrap">
<!----start-Header---->
<!----End-Logo---->
<!--body-top-->
code of the huge page
<!----End-wrap---->
</body>
</html>
I need to insert the following JavaScript code instead of the <!--head-->:
<script type="text/javascript">
var _prvar=_prvar||new Object();
(function(pa,s){if(document.getElementById('125456'))return false;
pa=document.createElement('script');pa.type='text/javascript';pa.async=true;pa.id='125456';pa.src='//abcdefg.com/pub.js';
s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(pa,s);})();
</script>
So what I did is placed the code
<script type="text/javascript">
var _prvar=_prvar||new Object();
(function(pa,s){if(document.getElementById('125456'))return false;
pa=document.createElement('script');pa.type='text/javascript';pa.async=true;pa.id='125456';pa.src='//abcdefg.com/pub.js';
s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(pa,s);})();
</script>
in to a code.js and instead of the <!--head-->in the PHP code I inserted <script type="text/javascript" src="code.js" />
The problem is that you have inserted the tag script as a non-templated tag, here is the right form:
<script type="text/javascript" src="code.js"></script>
Obviously, if the .js is located in the right place, it will be loaded.
You haven't seen the tag in your code probably because you've inspected the HTML with an HTML inspector, but that tool is not always capable to show you malformed tags. For be sure to see the right HTML result, you must view the souce code (usually, right click on the web page via browser and "show source code" option is there).
The content of the php page is as follows:
<!DOCTYPE HTML>
<html>
<head>
<title>title of the page</title>
<link href='http://fonts.googleapis.com/css?family=Ropa+Sans' rel='stylesheet' type='text/css'>
<!--head-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<!----start-wrap---->
<div class="wrap">
<!----start-Header---->
<!----End-Logo---->
<!--body-top-->
code of the huge page
<!----End-wrap---->
</body>
</html>
I need to insert the following javascript code instead of the <!--head--> :
<script type="text/javascript">
var _prvar=_prvar||new Object();
(function(pa,s){if(document.getElementById('125456'))return false;
pa=document.createElement('script');pa.type='text/javascript';pa.async=true;pa.id='125456';pa.src='//abcdefg.com/pub.js';
s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(pa,s);})();
</script>
So what I did is placed the code
<script type="text/javascript">
var _prvar=_prvar||new Object();
(function(pa,s){if(document.getElementById('125456'))return false;
pa=document.createElement('script');pa.type='text/javascript';pa.async=true;pa.id='125456';pa.src='//abcdefg.com/pub.js';
s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(pa,s);})();
</script>
in to a code.js and instead of the <!--head-->in the php code I inserted <script type="text/javascript" src="code.js" />
This question already has answers here:
Uncaught ReferenceError: $ is not defined?
(40 answers)
How to fix '$' was used before it was defined in both jslint and jshint using coding?
(2 answers)
Closed 8 years ago.
This is my first time trying to use JQuery and I was trying to add an event when the document is ready, but every time it says:
"$ was used before defined".
I don't know how to solve it. I tried different solutions on the internet but couldn't find any. Don't really know what I am doing wrong.
I referenced the HTML file to the js file like this
<!DOCTYPE html>
<html>
<head>
<title>Experimenting with Javascript</title>
<script type="text/javascript" src="script.js"></script>
<link type="text/css" rel="stylesheet" href="main.css" />
</head>
and this is my script
$(document).ready(function () {
"use strict";
$('div').mouseenter(function () {
$(this).animate({
height: '+=10px'
});
});
});
Reference the JQuery library in your page, like this
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
Include this tag above the script tag of your js file
Add JQuery library (http://jquery.com/)
Adding a event on every div in your app - rethink this. Add a class or something, and add it to a single element container, or a body, but don't add it to most common element.
You should organize your HTML DOM like that :
<!DOCTYPE html>
<html lang="en" class="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Experimenting with Javascript</title>
<link type="text/css" rel="stylesheet" href="main.css" />
</head>
<body>
<script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="script.js"></script>
</body>
1.You should call Jquery library before calling your project JS file's.
The problem here is that you are using jQuery without actually including that library of code in your HTML file.
<!DOCTYPE html>
<html>
<head>
<title>Experimenting with Javascript</title>
<link type="text/css" rel="stylesheet" href="main.css" />
</head>
<body>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
Just to clarify, jQuery is a library that acts on top of JavaScript so you would need to include that library above your own scripts that use it.
NOTE: It is best practice to include your scripts just before your closing body tags.
I am trying to build my personal website using express and want to put a datepicker on one of the page.
I tried to change the ejs file of this page, however, nothing works.
I am wondering if it is because that the layout.ejs file exists, and wondering how can I just load jquery-ui in only of the ejs.file? Because I cannot find any related npm to install . Many thanks for answering！XD
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" media="all">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
</head>
<body>
<script>
$(function() {
$( "#datepick" ).datepicker();
});
</script>
<aside class="widget">
<p>Date: <input type="text" id="datepick"></p>
</aside>
</body>
</html>
There is another similar question, but I think the answer does not works for me.
node.js - DatePicker jquery UI not workinng
When I just use Express and change the index.ejs like the following, it works , but when there are many pages, it seems that it cannot be loaded...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" media="all">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script>
$(function() {
$('#datepick').datepicker();
});
</script>
</head>
<body>
<aside class="widget">
<p>Date: <input type="text" id="datepick"></p>
</aside>
</body>
</html>
node.js - DatePicker jquery UI not workinng
For whom run into the same problem, this is the reference.
I finally found the answer by checking the code.I was unable to load JQuery for in the layout.ejs, I retyped the following in order to load the bootstrap, but actually by using https://npmjs.org/package/twitter-bootstrap-node twitter-bootstrap-node, there is no-need to load the javascripts again. This may be a common problems for beginners in Node.JS like me.Hope this answer can be helpful to people who run into the same problem and the code is in the answer of the related problem.
<script src="/javascripts/jquery.js"></script>
<script src="/javascripts/bootstrap.js"></script>
<script src="/vendor/twitter/less/bootstrap.less"></script>
Hi look at this jsfiddle link http://jsfiddle.net/w7PHj/
you need to use like this....
$('#datepick').datepicker();
I downloaded the plugin and added it as a separate file in my html, I also added the css file in the head, but it is not working. my html is this:
<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Click Sign Up!</title>
<link rel="stylesheet" href="signupstyle.css" type="text/css">
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="messi.css" />
</head>
<body>
<a href="#" id="line_break" >Why is my name required?</a><br><br>
</body>
and my script is this:
<script type="text/javascript" src="/js/messi.js"></script>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/place.js"></script>
<script type="text/javascript" src="/js/jqueryUI.js"></script>
they said I should call it like this:
$( "#line_break" ).click(function(){
messi.alert('This is an alert with Messi.');
I even added the $(document).ready(function(){}) and it still didn't work.
there website: http://marcosesperon.es/apps/messi/
my reason for using messi dialog box is because it has a better look than the jquery ui dialog box and can be customized to fit my liking. If this is a waste of time please tell me and recommend something else.
You're loading messi.js before you're loading jquery.
Since messi is a jQuery plugin, you need to load your scripts in the right order.
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/messi.js"></script>
<script type="text/javascript" src="/js/place.js"></script>
<script type="text/javascript" src="/js/jqueryUI.js"></script>
I am trying to use a tooltip jQuery plugin. This is what I have in <head> of index.html:
<head>
<title>Index</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/simpletip-1.3.1.min.js" type="text/javascript"></script>
<script src="js/homepage.js" type="text/javascript"></script>
</head>
And this is in js/homepage.js:
$(document).ready(function() {
// meaningless functions
$('.supported_hosts').simpletip({
fixed: true,
position: 'right',
content: 'test content.'
});
});
But for some reason, the tooltip doesn't show. But it does show if I include the tooltip function on the index page. Is there any way to get this working without having the tooltip function on the index page, but in an external file? Thanks.
I have never use the simplest plug in but i copy and pasted your header and your js code and everything seemed to work just fine.
I linked to the latest version of jquery and downloaded a fresh copy of simpletip.js and it worked with on the first try.
The only differences are/maybe:
- I don't know what your code looks like where you call 'supported_hosts' class in the html.
- The name of the simpletip.js file I didn't change it upon download, so I would check your file names and relative location.
Sorry there wasn't something more but what you have worked for me, here is the code I used in full incase this helps you:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Index</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery.simpletip-1.3.1.min.js" type="text/javascript"></script>
<script src="homepage.js" type="text/javascript"></script>
</head>
<body>
<span class="supported_hosts">Tool Tips here</span>
</body>
</html>
Javascript you gave:
$(document).ready(function() {
// meaningless functions
$('.supported_hosts').simpletip({
fixed: true,
position: 'right',
content: 'test content.'
});
});
I downloaded the simpletip.js here:
http://code.google.com/p/jquery-simpletip/downloads/detail?name=jquery.simpletip-1.3.1.min.js&can=2&q=
I would just double check your relative paths and class naming. Your code looks good.
Moving
<script src="homepage.js" type="text/javascript"></script>
to the end of the body seemed to solve the problem:
<body>
[code...]
<script src="homepage.js" type="text/javascript"></script>
</body>