Nothing happens when I press the button with the id test. I do get an error message in the debug of my console though that states:
ReferenceError: Can't Find variable '$'.
I believe this is a jQuery error, but I already have it imported. Here's the code:
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../assets/ico/favicon.ico">
<script type="text/javascript" src=".2.18.min.js"></script>
<script>
$("#test").click(function() {
alert("Handler for .click() called.");
});
</script>
<title>Panic App</title>
<!-- Bootstrap core CSS -->
<link href="./css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="./css/cover.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src=".7.0/html5shiv.js"></script>
<script src=".js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="loginModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h1 class="text-center">Login</h1>
</div>
<div class="modal-body">
<form class="form col-md-12 center-block">
<div class="form-group">
<input type="text" value="b" class="form-control input-lg" id="username" placeholder="Email">
</div>
<div class="form-group">
<input type="password" value="a" class="form-control input-lg" id="password"placeholder="Password">
</div>
<div class="form-group">
<button class="bn btn-primary btn-lg btn-block" id="test" value="Sign In">Sign In</button>
<span class="pull-right"><a href="#">Register</a></span><span><a href="#">Need help?</a></span>
</div>
</form>
</div>
<div class="modal-footer">
<div class="col-md-12">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
</div>
</div>
</div>
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand">Panic</h3>
<ul class="nav masthead-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<div class="inner cover">
<h1 class="cover-heading">Stay Safe.</h1>
<p class="lead">Panic is a beautiful emergency notification system like no other. Using the power of cloud puting, Panic innovates in ways you've never seen.</p>
<p class="lead">
<button class="btn btn-lg btn-default" data-toggle="modal" data-target="#loginModal">Sign Up.</button>
</p>
</div>
<div class="mastfoot">
<div class="inner">
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src=".11.0/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/docs.min.js"></script>
</body>
</html>
Nothing happens when I press the button with the id test. I do get an error message in the debug of my console though that states:
ReferenceError: Can't Find variable '$'.
I believe this is a jQuery error, but I already have it imported. Here's the code:
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../assets/ico/favicon.ico">
<script type="text/javascript" src="http://www.parsecdn./js/parse-1.2.18.min.js"></script>
<script>
$("#test").click(function() {
alert("Handler for .click() called.");
});
</script>
<title>Panic App</title>
<!-- Bootstrap core CSS -->
<link href="./css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="./css/cover.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn./libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn./libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="loginModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h1 class="text-center">Login</h1>
</div>
<div class="modal-body">
<form class="form col-md-12 center-block">
<div class="form-group">
<input type="text" value="b" class="form-control input-lg" id="username" placeholder="Email">
</div>
<div class="form-group">
<input type="password" value="a" class="form-control input-lg" id="password"placeholder="Password">
</div>
<div class="form-group">
<button class="bn btn-primary btn-lg btn-block" id="test" value="Sign In">Sign In</button>
<span class="pull-right"><a href="#">Register</a></span><span><a href="#">Need help?</a></span>
</div>
</form>
</div>
<div class="modal-footer">
<div class="col-md-12">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
</div>
</div>
</div>
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand">Panic</h3>
<ul class="nav masthead-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<div class="inner cover">
<h1 class="cover-heading">Stay Safe.</h1>
<p class="lead">Panic is a beautiful emergency notification system like no other. Using the power of cloud puting, Panic innovates in ways you've never seen.</p>
<p class="lead">
<button class="btn btn-lg btn-default" data-toggle="modal" data-target="#loginModal">Sign Up.</button>
</p>
</div>
<div class="mastfoot">
<div class="inner">
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/docs.min.js"></script>
</body>
</html>
- 2 We don't have particularly sensitive ears here, but nevertheless the title could do with rewording. – halfer Commented Mar 27, 2014 at 17:25
- 2 You load jQuery at the very end, but try to use it before. This doesn't work. – Odi Commented Mar 27, 2014 at 17:25
3 Answers
Reset to default 7You try to call $ on line 11 of that source code (and maybe also in the script on line 9).
You don't include jQuery until the very end.
You have to include jQuery before you try to use it.
Move your code after the jQuery initialization:
<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/docs.min.js"></script>
<script>
$("#test").click(function() {
alert("Handler for .click() called.");
});
</script>
You need to include the jQuery library above your script. Also your script will work only if you keep it inside the $(document).ready() function.