Clever Geek Handbook

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>
+3


source to share


3 answers


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>
+2


source


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



+2


source


Place your jquery script in:

$(document).ready(function(){
    ...
});

The script will now run when all documents are loaded.

+1


source






More articles:


All Articles