my file beginning looks like this:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My title</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/update.js" type="text/javascript"></script>
<!-- sifr -->
<link href="sifr207/sIFR-screen.css" rel="stylesheet" type="text/css" media="screen" />
<script src="sifr207/sifr.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
if(typeof sIFR == "function")
{
sIFR.replaceElement("sifr", named({sFlashSrc: "sIFR-2.0.7/corporateacon-reg.swf", sColor: "#FF0000" , sWmode: "transparent"}));
};
});
</script>
<!-- -->
</head>
I really do not understand why the '$(document).ready(function()' is not found, because I implement sifr.js BEFORE that call.
Any suggestions?
I would appriciate it, really!
shoutz,
supervision
you do not have jQuery.js included in your file!
Since SIFR is a jQuery plugin, you have to load the base library before sifr.js.
Try adding <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript></script> at the beginning of your script.
Seems like you didn't include any reference to JQuery before that call, that's why '$' is undefined. Try to add this before:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js" type="text/javascript"></script>
Because sIFR doesn't implement a $ function. You probably mean to use Prototype.js, jQuery, or some other library that uses that badly named variable.
$(document).ready(callback) is a method provided by the jQuery library to run callback when the document parsing has completed. It looks like you don't have a script referencing jQuery in your file, so this method is not available.
Simply add jQuery to your head before sifr is loaded.
Related
I am a beginner programmer and I'm trying to make a web page that displays a JQuery Inline Date and Time Picker. As I was researching, I found this documentation: DateTimePicker. I followed the steps of first importing the JS and CSS files (after the closing body tag) using these tags:
<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css"/ >
<script src="jquery.js"></script>
<script src="jquery.datetimepicker.js"></script>
Following those tags, I called on my <input> from my Home.html file with the id of datetimepicker. Then using that id, I copied the code from the tutorial that creates the Inline DateTime Picker Calendar, like so:
$('#datetimepicker').datetimepicker({
inline:true
});
So my Home.html file looks like this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Home</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js"></script>
<link rel="stylesheet" type="text/css" href="./jquery.datetimepicker.css"/>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<h3>Inline DateTimePicker</h3>
<input type="text" id="datetimepicker"/><input type="button" onclick="$('#datetimepicker3').datetimepicker({value:'2011/12/11 12:00'})" value="set inline value 2011/12/11 12:00"/><br><br>
</body>
<!-- CALLS JQUERY LIBRARY FOR DATE AND TIME PICKER -->
<!-- this should go after your </body> -->
<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css"/ >
<script src="./jquery.js"></script>
<script src="./jquery.datetimepicker.js"></script>
<script>
$('#datetimepicker').datetimepicker({
inline:true
});
</script>
</html>
However, when I run this code, I get an error that says:
TypeError: 'undefined' is not a function (evaluating '$('#datetimepicker').datetimepicker({
inline:true
})')
This is what is displaying:
This is what I want to display:
How can I get an Inline calendar to display on my Home.html page?
Put
<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css"/ >
<script src="./jquery.datetimepicker.js"></script>
between your <head></head> tags and remove
<script src="./jquery.js"></script>
I had the same sort of issue , If download the the source code from the XDSoft site
there is build folder , try using jquery.datetimepicker.full.js file from build folder .
You need to include jquery-ui.js
Do not confuse between jQuery versions. You first referenced jQuery here:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
And then you are doing it here:
<script src="./jquery.js"></script>
Please remove one. As the newer jQuery will be active and it doesn't have the plugin registered.
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 m going to try this: http://jquerytools.org/demos/scrollable/index.html
But without any event trigger, I m getting below error
But I have confusion about, why the on method not finding in even page load
<head>
<link href="css/scrollable-horizontal.css" rel="stylesheet" type="text/css" />
<link href="css/scrollable-buttons.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.6.1.min.js"></script>
<script src="js/jquery.tools.min.js"></script>
</head>
Nothing done at javascript part
<script>
$(function() {
// initialize scrollable
$(".scrollable").scrollable();
});
</script>
It stopped my further implementation. Have any idea about this?
JQuery .on method was added in 1.7. You need to update your JQuery as from your screenshot you are currently using 1.6
http://api.jquery.com/on/
Once downloaded from here, change the below where marked
<head>
<link href="css/scrollable-horizontal.css" rel="stylesheet" type="text/css" />
<link href="css/scrollable-buttons.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.6.1.min.js"></script> <!-- Change this line -->
<script src="js/jquery.tools.min.js"></script>
</head>
You need to update jQuery version.
Because jQuery 1.6 does not have .on() it's added into new version of jQuery.
You are using jQuery 1.6.1 - on() didn't exist back then (not until 1.7).
Your options:
Either you use bind() instead.
Or you update to the latest jQuery.
In regard to the second option, replace
<script src="js/jquery-1.6.1.min.js"></script>
with
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
I was originally just using JSFiddle, but I wanted to move my project over to Notepad++ so I could have the files on my computer. The problem is, my Javascript on my page is not going into effect.
Heading Code:
<head>
<link href="C:/HTML/App/app.css" type="text/css" rel="stylesheet" />
<script type='text/javascript' src='C:/HTML/App/app.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
</head>
Any reason why? It links to my style sheet just fine, but my app.js does not seem to be working.
Three things:
app.js uses jQuery so the jQuery file needs to be included first
Also, you said you're running this on your PC. You could be using localhost, but if you're running from file://, src="//... won't work because your browser will be looking for file://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js instead of http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js so all you need to do is add the http:
But did you mean jQuery not jQuery UI? (Thanks #ahren)
<head>
<link href="C:/HTML/App/app.css" type="text/css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> -->
<script type='text/javascript' src='C:/HTML/App/app.js'></script>
</head>
Jquery comes first, like so:
<head>
<link href="C:/HTML/App/app.css" type="text/css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script type='text/javascript' src='C:/HTML/App/app.js'></script>
</head>
I'm attempting to create a main js controller that includes all needed js files for my application to keep everything as structured as possible.
I thought this would work, but it doesn't seem to append anything to head:
HTML:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../static/css/main.css" />
<link rel="stylesheet" type="text/css" href="../static/css/sub/navbar.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="../static/js/includes.js"></script>
<title>Untitled Document</title>
</head>
As you can see includes.js is imported after jQuery from Google's CDN
Contents of includes.js:
var scripts = ['../static/js/functions/notifications.js', '../static/js/functions/subnavbar.js'];
$(document).ready( function() {
var iterate = scripts.length;
for(i = 0; i < iterate; i++) {
$('head').append('<script type="text/javascript" src="' + scripts[i] + '"></script>');
}
});
I have no idea why it's not appending the contents of the array scripts to head. I tested out the script by appending the contents to body (see this jsFiddle).
Any answers as to why it's not working, or edits to make it work would be greatly appreciated :)!
Something to consider: this problem has been solved for you already, and an awesome JavaScript library already exists. It's called Require JS.
I strongly recommend checking it out to see if it'll work for your requirements before rolling your own dependency loader.
You are using jQuery, why not using $.getScript?
This works fine in this example: http://jsfiddle.net/x6rCr/