I'm experiencing difficulty loading my jQuery library in my 'server.js' file. Currently, I have a file named 'route.js' which sends a file called 'home.html' on 'localhost:port/'. The home.html page displays fine, but I have a jQuery CDN/library and a link to server.js included. When I run node route.js, I keep getting an error message saying '$' is not defined, indicating that my JavaScript file is running before the HTML finishes loading. How can I resolve this issue?
//server.js
exports.path = require('path');
var express = require('express');
exports.app = express();
$(document).on('click', '.btn', sendSurvery);
function sendSurvey(){
var myQueryUrl = "http://localhost:10003/survey";
$.ajax({url: myQueryUrl, method: 'GET'});
}
//route.js
var library = require('../../server.js');
library.app.use(function(request, response){
// response.sendFile(__dirname + '/../public/home.html');
response.sendFile(library.path.resolve(__dirname + '/../public/home.html'));
})
library.app.get('/survey', function(request, response){
response.sendFile(library.path.resolve(__dirname + '/../public/survey.html'));
})
library.app.listen(10003, function(){
console.log('connected on 10003')
})
//home.html
<!DOCTYPE html>
<html>
<head>
<title>Friend Finder Home Page</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="rowOne">
<div class="jumbotron col-lg-6">
<h1>Hello, world!</h1>
<p>Click the button NOW!</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">CLICK NOW!</a></p>
</div>
</div>
<script src="https://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="../../server.js"></script>
</body>
</html>