Handlebars in JSP - javascript

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>
Add New
</td>
</tr>
</table>
</script>
</form>
</body>
</html>

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.

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>
Add New
</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>

Related

I need help please. For Javascript and HTML. If a user inputs a word that is correct the page will redirect to another page [duplicate]

How do you properly link a JavaScript file to a HTML document?
Secondly, how do you use jQuery within a JavaScript file?
First you need to download JQuery library from http://jquery.com/ then
load the jquery library the following way within your html head tags
then you can test whether the jquery is working by coding your jquery code after the jquery loading script
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--LINK JQUERY-->
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<!--PERSONAL SCRIPT JavaScript-->
<script type="text/javascript">
$(function(){
alert("My First Jquery Test");
});
</script>
</head>
<body><!-- Your web--></body>
</html>
If you want to use your jquery scripts file seperately you must define the external .js file this way after the jquery library loading.
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script src="js/YourExternalJQueryScripts.js"></script>
Test in real time
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--LINK JQUERY-->
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<!--PERSONAL SCRIPT JavaScript-->
<script type="text/javascript">
$(function(){
alert("My First Jquery Test");
});
</script>
</head>
<body><!-- Your web--></body>
</html>
This is how you link a JS file in HTML
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script> - tag is used to define a client-side script, such as a JavaScript.
type - specify the type of the script
src - script file name and path
To include an external Javascript file you use the <script> tag. The src attribute points to the location of your Javascript file within your web project.
<script src="some.js" type="text/javascript"></script>
JQuery is simply a Javascript file, so if you download a copy of the file you can include it within your page using a script tag. You can also include Jquery from a content distribution network such as the one hosted by Google.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
You can add script tags in your HTML document, ideally inside the which points to your javascript files. Order of the script tags are important. Load the jQuery before your script files if you want to use jQuery from your script.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="relative/path/to/your/javascript.js"></script>
Then in your javascript file you can refer to jQuery either using $ sign or jQuery.
Example:
jQuery.each(arr, function(i) { console.log(i); });
Below you have some VALID html5 example document. The type attribute in script tag is not mandatory in HTML5.
You use jquery by $ charater. Put libraries (like jquery) in <head> tag - but your script put allways at the bottom of document (<body> tag) - due this you will be sure that all libraries and html document will be loaded when your script execution starts. You can also use src attribute in bottom script tag to include you script file instead of putting direct js code like above.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<div>Im the content</div>
<script>
alert( $('div').text() ); // show message with div content
</script>
</body>
</html>
this is demo code but it will help
<!DOCTYPE html>
<html>
<head>
<title>APITABLE 3</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$.ajax({
type: "GET",
url: "https://reqres.in/api/users/",
data: '$format=json',
dataType: 'json',
success: function (data) {
$.each(data.data,function(d,results){
console.log(data);
$("#apiData").append(
"<tr>"
+"<td>"+results.first_name+"</td>"
+"<td>"+results.last_name+"</td>"
+"<td>"+results.id+"</td>"
+"<td>"+results.email+"</td>"
+"<td>"+results.bentrust+"</td>"
+"</tr>" )
})
}
});
});
</script>
</head>
<body>
<table id="apiTable">
<thead>
<tr>
<th>Id</th>
<br>
<th>Email</th>
<br>
<th>Firstname</th>
<br>
<th>Lastname</th>
</tr>
</thead>
<tbody id="apiData"></tbody>
</body>
</html>

JQuery is not working on eclipse

I'm new to JQuery and developing a mavenized dynamic web application with eclipse. I downloded JQuery and put the folder under webcontent and refering to it with src tag.
Below is the code snippet:
<%# 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>Insert title here</title>
<script type="text/javascript" src="/app/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#hh").hide;
alert("OK");
});
</script>
</head>
<body>
<input type="button" id="hh" value="here">
</body>
</html>
However I don't see the outcome on the server.
Make sure the reference path to the file (src) is correct and that you have permissions to read it.
Try this,
Created a test.js file, only with this line of code alert("this
work!");
Put the test.js in your folder App, same place when you
have your jquery.js
Make the reference in your code <script
type="text/javascript" src="/app/test.js"></script>
If you can see the alert("this work!") now you know that your reference is ok, if you do not see, something you are doing wrong.

JQuery auto complete with JSP

I am trying to fill a Javascript array inside a javascript functions using JSTL. My purpose is to make the JQuery auto complete feature work with my web application which is developed using Servlets and jsp. The original link to the JQuery auto completionis here - https://jqueryui.com/autocomplete/
Below is my code
index.jsp
<%#taglib prefix="c" uri= "http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function () {
var availableTags=[] ;
<c:forEach var="list" items="${requestScope['list']}">
availableTags.push('${list.drug_name}');
</c:forEach>
$("#tags").autocomplete({
source: availableTags
});
});
</script>
</head>
<body>
<form action="Combo">
<div class="ui-widget">
<label for="tags">Tags: </label>
<input name="selectBox" id="tags">
<input type="submit"/>
</div>
</form>
</body>
</html>
I am calling the index.jsp from a servlet, like below.
List<Names> list=names.readNames(file);
request.setAttribute("list", list);
RequestDispatcher dispatcher=request.getRequestDispatcher("WEB-INF/jsp/Index.jsp");
dispatcher.forward(request, response);
Here the List<Names> list=names.readNames(file); returns a bean of Names. Names is just a simple class with setters and getters fer one variable name which is type String.
However I was not able to achieve this, because the autofilling is not working in this way. Most probably because there is an error in inserting data to the array. what has gone wrong here?
Open the developer tools (F12) and go to console.
There will be some errors there.
use the var name as item instead of list
<c:forEach var="item" items="${requestScope['list']}">
availableTags.push('${item.drug_name}');
</c:forEach>

not able to include .js file in my jsp page

This is my file under WEB-INF/jsp folders:
<%# 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>jQuery Hello World</title>
<script type="text/javascript" src="/WEB-INF/static/jquery-1.4.2.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function(){
$("#flag").html("Hello World !! I have come from J Query World");
});
</script>
<body>
<font color="RED"> Hello World !! I have come from plain world</font>
<font color="BLUE"> <div id="flag"></div></font>
</body>
</html>
and my jquery file is under WEB-INF/static
what should i do so that my code works properly , i think path of .js file is causing the prob.
WEB-INF is where you keep private files for your application that should not be accessible to the client.
Move your JS to somewhere accessible.
The question is where is your jsp file.
As you said your jsp's path is : WEB-INF/jsp
So your js path should be this: src="../static/jquery-1.4.2.js"
Try this and i believe it will work.
If it will not then try src="../WEB-INF/static/jquery-1.4.2.js", otherwise add a comment with your new state.

how do I set up sevenup?

I am just trying to get this plugin to work but I am not sure what I am doing wrong.
http://code.google.com/p/sevenup/
So I tried to follow the one like of code they give you.
<script type="text/javascript" src="sevenup.0.3.min.js"></script>
...
<body onload="sevenUp.test( options, callback );">
My test page.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script src="sevenup.0.3.js" type="text/javascript"></script>
</head>
<body onload="sevenUp.test( options, callback );">
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
So I did that and I get "option" is not defined.
So I tried this then
<%# Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script src="sevenup.0.3.js" type="text/javascript">
var options = {
enableClosing: true,
enableQuitBuggingMe: true,
overlayColor: "#000000",
lightboxColor: "#ffffff",
borderColor: "#6699ff",
downloadLink: osSupportsUpgrade ?
"http://www.microsoft.com/windows/internet-explorer" :
"http://getfirefox.com",
overrideLightbox: false,
lightboxHTML: null,
showToAllBrowsers: false
};
var callback = function() {
// Switch IE-specific content
// AJAX call to map IP to 'IE6 user' status
// etc.
}
sevenup.test(options, callback);
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
but nothing happens.
What am I missing.
Can someone set me an example up? Like I tried many different ways other then above and I still can't get it to work.
A standard Html page should be fine. Since this really does not need serverside stuff.
Here is a standard html page.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript" src="sevenup.0.3.js"></script>
<script type="text/javascript" src="sevenup_black.0.3.js"></script>
</head>
<body onload="sevenUp.plugin.black.test( options, callback );">
</body>
</html>
So not sure what I am still doing wrong. Get options undefined.
Try passing an empty options object and function as a parameter. The options variable is NOT exposed by the script and that seems to be why it says it's undefined (because it is). The callback variable isn't exposed either.
sevenUp.test({}, function(){} );
You could also easily load up the page in Firefox, put up a breakpoint and inspect the local variables.
You're using ASP.NET and the Body OnLoad is not a great place for putting JavaScript hooks.
Add this to the very bottom of your page before the </body> tag:
<script type="text/javascript">
// Call sevenUp
sevenUp.test( options, callback );
</script>
Another thing you want to do is make sure that you are referencing the correct path to the source JavaScript file:
<script type="text/javascript" src="<%=ResolveClientURL("~") %>/Scripts/sevenup.0.3.min.js"></script>
Remove the runat="server" from your <head> tag. That should fix it.

Categories