I just think this is useful for people having this problem:
I had this code:
<html>
<head>
<link rel="stylesheet" href="example.css" type="text/css"/>
<title>CSS TESTS</title>
<script language="text/javascript">
var move = 0;
</script>
</head>
<body>
<input type="text" id="shape" onchange="alert(move);"/>
</body>
</html>
But I couldn't get the alert to work. I would get the Uncaught ReferenceError: move is not defined.
It turns out that the language attribute on the script tag did not allow me to specify text/javascript but only javascript. The type attribute allows "text/javascript". That was all and I spent hours trying to find the bug in the javascript code... arg!
So, basically I changed the line that said
<script language="text/javascript">
to
<script type="text/javascript">
and it all worked.
Change <script language="text/javascript"> TO <script type="text/javascript">
Working Code --
<html>
<head>
<link rel="stylesheet" href="example.css" type="text/css"/>
<title>CSS TESTS</title>
<script type="text/javascript">
var move = 0;
</script>
</head>
<body>
<input type="text" id="shape" onchange="alert(move);"/>
</body>
</html>
or do this, here "move" casted as string
<html>
<head>
<link rel="stylesheet" href="example.css" type="text/css"/>
<title>CSS TESTS</title>
</head>
<body>
<input type="text" id="shape" onchange="alert('move');"/>
</body>
</html>
Dont forget to include ,
<script src="jquery-1.xx.x.min.js" type="text/javascript"> </script>
if you are using jquery, xx-x stand for the version you are using.
Related
Im trying to code a simple Javascript exercise where I have to place different text at different part of the page but it keeps throwing me a
TypeError:sal[0] is undefined
Here is the javascript code.
function sals(a,b,c,d,e,id)
{
var sal = document.getElementsByClassName(id);
sal[0].style.top=a;
sal[0].style.left=b;
sal[0].style.color=c;
sal[0].style.fontsize=d;
sal[0].style.zindex=e;
}
sals('5%','50%','yellow','250px','20','GB');
What am I doing wrong?
For further reference, here is my HTML code aswell
<html>
<head>
<title>Hello</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<h1 class="GB"> Holla</h1>
<script src="main.js"></script>
</body>
</html>
Your JavaScript is running before the page (DOM) has fully loaded.
the simplest way to make sure the DOM is loaded before your JS runs, is to add 'defer' to the script tag thus;-
<head>
<title>Hello</title>
<link rel="stylesheet" href="main.css">
<script src="main.js" defer></script>
</head>
<body>
<h1 class="GB"> Holla</h1>
</body>
</html>
I am trying the jquery alert example on this webpage: http://www.tutorialscollection.com/jquery-demo/jquery-demo.php?ex=8.0_1. I'm new to using jquery and I can't figure out how to get the dependencies listed in the head section:
<head>
<script src="jquery.alerts.js" type="text/javascript"></script>
<link href="jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />
Here is the full file, but probably not needed:
<!DOCTYPE html>
<head>
<title>Examples of using jQuery Alerts</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.ui.draggable.js" type="text/javascript"></script>
<script src="jquery.alerts.js" type="text/javascript"></script>
<link href="jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />
<!-- Example script -->
<script type="text/javascript">
$(document).ready( function() {
$("#basic_button").click( function() {
jAlert('Example of a basic alert box in jquery', 'jquery basic alert box');
});
});
</script>
</head>
<body>
<p>
<input id="basic_button" type="button" value="Show Basic Alert" />
</p>
</body>
</html>
Google hosts a CDN. To make sure JQuery's libary is loaded add this into the <head> tags
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
If you are trying this on a local machine then you can download jquery here and set it up in the <head> as this:
<script src="path_to_jquery" ></script>
I found the dependencies here:
http://www.tutorialscollection.com/jquery-demo.
This serves my purposes much better than the tutorial in this question: How to generate a simple popup using jQuery
I have a script for dynamic javascript date picker, taken from here. Please scroll down to Toggle by Element which i want to implement but it is not working
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<SCRIPT type="text/javascript" src="js/jquery.min.js"></SCRIPT>
edit: i added the following mootools script
<script src='http://cdnjs.cloudflare.com/ajax/libs/mootools/1.3.2/mootools-yui-
compressed.js'
type='text/javascript'></script>
<SCRIPT type="text/javascript" src="datepicker.js"></SCRIPT>
<SCRIPT type="text/css" src="datepicker.css"></SCRIPT>
<SCRIPT type="text/css" src="datepicker_vista.css"></SCRIPT>
</head>
<body>
<script language="JavaScript">
window.addEvent('load', function() {
new DatePicker('.demo_allow_empty', {
pickerClass: 'datepicker_dashboard',
allowEmpty: true
});
});
</script>
<label>Datepicker starting at and allowing no value:</label>
<input name='date_allow_empty' type='text' value='' class='date demo_allow_empty' />
</body>
</html>
what i am missing?
It seems it require mootools, i cant see any mootools script tag in your source.
it has nothing to do with jQuery.
edit : here is an exemple :
<script src='http://cdnjs.cloudflare.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js'
type='text/javascript'></script>
put it before the date picker script
I'm just posting my entire page to prevent confusion. I've stared at each link and checked the folder for the files. it all seems to be there. what's not working? very frustrated, could use a fresh pair of eyes. all my page displays is the content of the pre, but without any formatting. again, thanks for the help
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--STYLESHEET LINKS-->
<link href="stylesheet.css" rel="stylesheet" type="text/css" media="screen" />
<link href="shThemeDefault.css" rel="stylesheet" type="text/css" media="screen" />
<link href="shCore.css" rel="stylesheet" type="text/css" media="screen" />
<!--SYNTAX HIGHLIGHTER-->
<script type="text/javascript" src="shCore.js"></script>
<script type="text/javascript" src="shBrushPhp.js"></script>
<!--JQUERY and PROCESSING SCRIPTS-->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="processing.js"></script>
<script type="text/javascript" src="init.js"></script>
</head>
<body>
<pre class="brush: php">
$last_modified = filemtime("header.php");
echo("last modified: ");
echo(date("m.j.y h:ia", $last_modified));
</pre>
<script type="text/javascript">
SyntaxHighlighter.HighlightAll();
</script>
</body>
</html>
Four things:
SYNTAX HIGHLIGHTER - put the .js files AFTER the jquery, jQueryUI, etc. scripts. The order is important!
use $(document).ready to make sure that all the js files are loaded before the body content tries to use it.
Are you using firebug or some such tool to check for script errors in the browser?
Are you getting any errors at all or just not seeing the highlighting effect?
By replacing:
SyntaxHighlighter.HighlightAll();
with
SyntaxHighlighter.all();
your sample code works for me.
Hi I am new to jQuery. Can some body tell me how to use JAlert in a project. Please help. thnx
ps
Hi I have used it in a netbeans project. But it doesnot work
<html>
<head>
<script type="text/javascript" src="jquery.js" ></script>
<script type="text/javascript" src="jquery.jalert.js" ></script>
<link href="jalert.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script>
function hello()
{
jAlert('Price should be blocks of 10 cents', 'FAILED', );
}
</script>
</head>
<body>
<form name="accounts" method="POST" action="test.jsp">
<input type="button" name="clientAccount" value="click" onclick=hello()>
</form>
</body>
</html>
can sombody tell me what the problem
Go to the jAlert demo page and view the source code.
see http://www.smooka.com/blog/2009/02/22/jalert-jquery-alert-box-plugin/
But please first search for jalert in Google, if you can't find something, you can ask a question here.