Q: Handlebars in JSP I need to use Handlebars inside of a jsp page. I have handlebars-v1.3.0.js in my js folder and used the following code snippet to include that js file into my jsp page. 
code:
<script type="text/javascript" src="./js/handlebars-v1.3.0.js"></script>

I tried <script type="text/javascript" src="js/handlebars-v1.3.0.js"></script> also. But no luck.
But when the page is loaded I am getting an error "Hanldebars not defined" in my browser console. Please suggest what am I doing wrong.The whole thing is working if I use handlebars inside of an html page.
Folder structure is as shown below. 
-WebContent
  --Home.jsp

-js
  --handlebars-v1.3.0.js

I would like to know two things.
 1.) what is the right way to give the js file path inside the jsp file ?
 2.) Does jsp support handlebars ?
'components' is an array object which is defined in another js.
My source code(Home.jsp) :
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>My first JSP</title>

<script type="text/javascript" src="./js/handlebars-v1.3.0.js"></script>

<script type="text/javascript">
    Handlebars.registerHelper('eachByIdx', function(menuData, options) {

            // My Logic 
    });

    var menuSource = document.getElementById("myTemplate").innerHTML;
    var menuTemplate = Handlebars.compile(menuSource);
    document.getElementById("div1").innerHTML = menuTemplate(menuData);
</script>

</head>

<body>
    <form action="Hello" method="post">
            <input type="text" value="ajith" />
        <script id="myTemplate" type="text/x-handlebars-template">
        <table>

       {{#eachByIdx components}}
                    // My Logic here              
       {{/eachByIdx}}

        <tr>
            <td>
             <a href="" onclick="return popup(this.form)">Add New</a>                   
     </td>
        </tr>           
        </table>       
       </script>
    </form>
</body>
</html>


A: Don't use a relative path to load JS files from within JSP files, since JSP files can be:


*

*Located essentially anywhere, and

*May be used (e.g., included) in other places


Instead, use an absolute path relative to your web content root, ideally using a JSP URL-ish tag so the context is provided automatically.

A: *

*Regarding absolute path , try ${pageContext.request.contextPath}/js/handlebars-v1.3.0.js

*Yes , please move your scripts code to the bottom, you are trying use getElementById , but the page did not finish loading. 


Please see below sample:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script   src="${pageContext.request.contextPath}/js/handlebars-v1.3.0.js"></script>
</head>

<body>
    <form action="Hello" method="post">
        <input type="text" value="ajith" />
      <div id="div1"></div>
    </form>

<script id="myTemplate" type="text/x-handlebars-template">
  <table>
      {{#eachByIdx components}}
                  // My Logic here
      {{/eachByIdx}}
      <tr>
          <td>
           <a href="" onclick="return popup(this.form)">Add New</a>
          </td>
      </tr>           
  </table>       
</script> 
<script type="text/javascript">
    Handlebars.registerHelper('eachByIdx', function(menuData, options) {
            //My Logic 
    });

    var menuSource = document.getElementById("myTemplate").innerHTML;
    var menuTemplate = Handlebars.compile(menuSource);
    document.getElementById("div1").innerHTML = menuTemplate(menuTemplate);
</script> 
</body>
</html>


