Tuesday, 4 April 2017

"ReferenceError: $ is not defined" even though JQuery inclusions are referenced orderly

I know this question was asked before but following the same answers did not help my case. I'm using node.js and I'm referencing the JQuery in a handlebars layout file.

javascript

var chartData;
$(function(){
 $.AJAX({
   url: 'http://localhost:1337/loadcells',
   type: 'GET',
   success: function(data){
     chartData = data;
     console.log(data);
     var template = Handlebars.compile($("#tabular-template").html());
     $("#table-location").html(template(data));
   }
  });
 });

handlebars main file

<!-- Filename: main.handlebars -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet"    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<title>FusionCharts Sample</title>
</head>
<body>
    <div class="container">
      }
    </div>
<script src="http://code.jquery.com/jquery-2.1.4.min.js" charset="utf-8"></script>
<script     src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.0/handlebars.js"></script>
<script src="/public/js/fusioncharts_demo.js" charset="utf-8"></script>
<script src="/public/js/fusioncharts.js"></script>
<script src="/public/js/fusioncharts.charts.js"></script>
<script src="/public/js/fusioncharts.theme.zune.js"></script>
</body>
</html>



via Mohanad Mohamed

No comments:

Post a Comment