Uncaught ReferenceError: $ is not defined. (jQuery, javascript) -
i know "uncaught referenceerror: $ not defined" common problem. have no idea code wrong. googled no solution solve this. in advance!
my code below.
because code way lengthy, divided 3 jsp files: list.jsp, authormodals.jsp, listauthor.jsp. attach code here, have deleted unrelated code make short.
list.jsp:
<!doctype html> <html lang="en"> <head> <title>administrator</title> <!-- bootstrap core css - uses bootswatch flatly theme: http://bootswatch.com/flatly/ --> <link href="../css/bootstrap.min.css" rel="stylesheet"> <!-- custom css --> <link href="../css/freelancer.css" rel="stylesheet"> <!-- custom fonts --> <link href="../font-awesome/css/font-awesome.min.css" rel="stylesheet" type="../text/css"> <link href="http://fonts.googleapis.com/css?family=montserrat:400,700" rel="stylesheet" type="../text/css"> <link href="http://fonts.googleapis.com/css?family=lato:400,700,400italic,700italic" rel="stylesheet" type="../text/css"> </head> <body id="page-top" class="index"> <!-- author modals --> <%@include file="authormodals.jsp"%> <--! links authormodals.jsp--> <!-- jquery --> <script src="../js/jquery.js"></script> <!-- bootstrap core javascript --> <script src="../js/bootstrap.min.js"></script> <!-- plugin javascript --> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> <script src="../js/classie.js"></script> <script src="../js/cbpanimatedheader.js"></script> <!-- contact form javascript --> <script src="../js/jqbootstrapvalidation.js"></script> <script src="../js/contact_me.js"></script> <!-- custom theme javascript --> <script src="../js/freelancer.js"></script> </body> </html> authormodals.jsp:
<!-- author modals --> <!-- unrelated code here --> <!-- list author --> <%@include file="listauthor.jsp"%> <--! links listauthor.jsp--> listauthor.jsp:
<table class="table table-striped"> <thead> <tr> <th>id</th> <th>name</th> <th>update</th> <th>delete</th> </tr> </thead> <tbody id="authordata"> </tbody> </table> <script id="entry-template" type="text/x-handlebars-template"> <tr> <td>{{authorid}}</td> <td>{{authorname}}</td> <td>{{authorid}}</td> <td>{{authorname}}</td> </tr> </script> <script> var source = $("#entry-template").html(); <!-- code stops here --> var template = handlebars.compile(source); var datastring; $.ajax({ method : "post", url : "../listauthor" }).done(function(data) { data = $.parsejson(data); $.each(data, function(i, item) { var html = template(item); datastring += html; }); $("#authordata").html(datastring); }); function pageauthor(page) { datastring = ""; $.ajax({ method : "post", url : "../listauthor", data : { pageno : page } }).done(function(data) { data = $.parsejson(data); $.each(data, function(i, item) { var html = template(item); datastring += html; }); $("#authordata").html(datastring); }); } </script>
update code below , see,
few things:
the order in load scripts important,
make sure load jquery before other script
the below code ensure code being loaded after jquery has been initialized.
jquery(document).ready(function($) { var source = $("#entry-template").html(); var template = handlebars.compile(source); var datastring; $.ajax({ method: "post", url: "../listauthor" }).done(function(data) { data = $.parsejson(data); $.each(data, function(i, item) { var html = template(item); datastring += html; }); $("#authordata").html(datastring); }); function pageauthor(page) { datastring = ""; $.ajax({ method: "post", url: "../listauthor", data: { pageno: page } }).done(function(data) { data = $.parsejson(data); $.each(data, function(i, item) { var html = template(item); datastring += html; }); $("#authordata").html(datastring); }); } }); read more information document ready
Comments
Post a Comment