JQuery with EJS
JQuery doesn't work with EJS, here is my EJS page. I can see that the EJS functionality is working fine, but the jQuery functionality is not working. It doesn't show any errors.
<!DOCTYPE html>
<html>
<head>
<title>Help Page</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1>Help</h1>
<p>This is Help Page</p>
<h2> Member Data </h2>
<% data.forEach(function(d){ %>
<%= d.member_desc %>
<% });%>
<script type='text/javascript'>
$(function(){
alert('inside jquery');
});
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
</body>
</html>
You need to put jQuery <script>
before the other. Otherwise not $
yet defined.
The browser downloads each script one by one. Let's say we had scripts A and BB to use something from A, then A must be before B or it won't work.
TL; DR
Change this:
<script type='text/javascript'>
$(function(){
alert('inside jquery');
});
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
For this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type='text/javascript'>
$(function(){
alert('inside jquery');
});
</script>
I know it's a bit late to answer this, but I just want to add this comment, they have (jquery and ejs) different lifecycles that one (ejs) compiles before rendering, and jquery works after rendering, your problem looks like this cause
Place your jquery script in:
$(document).ready(function(){
...
});
The script will now run when all documents are loaded.