JQuery is not working on eclipse - javascript

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.

Related

404 errors for javascripts and css at server end

I want to know why for 404 errors of a js or css or images the container/application server doesn't display a error page in the browser configured in the web.xml. Also how to know which file caused the 404 error in the error page configured in web.xml. I need to invalidate the user session in the error page but i want to know which type of file or which file caused the 404 error.
My Web.xml looks like this
<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<welcome-file-list>
<welcome-file>page1.jsp</welcome-file>
</welcome-file-list>
<error-page>
<error-code>404</error-code>
<location>/page2.jsp</location>
</error-page>
</web-app>
page1.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>Insert title here</title>
<script type="text/javascript" src="abc.js"></script>
</head>
<body>
<%
System.out.println("page 1");
%>
</body>
</html>
In this sample application abc.js does not exist.
page2.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>Insert title here</title>
</head>
<body>
<%
System.out.println("page 2");
System.out.println(request.getRequestURI());
%>
</body>
</html>
The output i get is :-
page 2
/Test404/page2.jsp
I want to know why page 1 was not printed in the console.
Also i want to know which file (in this case abc.js) caused the page2.jsp to run.
Any help would be much appreciated.
Thanks
I use Xenu to find these. Try it, you'll like it!

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

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.

Jquery datepicker: How to make it work properly?

I'm trying to carry out a jsp page with some functionalities of Jquery. But, despite my efforts, there's no way to do it.
I've downloaded jquery1.7.1 and jquery-ui1.8.17 (non-mini), and renamed it to jquery171.js and jquery-ui.js. They are in /js folder.
There's a very simple jsp page below, which is not showing the DatePicker of jquery. I'm using jquery UI 1.7.1. There's no errors in the files, just several warnings, like variables never used and not initialized.
<%# 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">
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<link type="text/css" href="css/ui-lightness/jquery.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"/></script>
<script type="text/javascript" src="js/jquery-ui.js"/></script>
</head>
<body>
<input type="text" id="tx" name="tx"/>
<script type="text/javascript">
$("tx").datepicker({dateFormat: 'dd/mm/yyyy'});
</script>
</body>
</html>
But, when I run the stuff, nothing happens. Have you any idea of where should be the problem? If you have already configured jquery in your Eclipse, what other steps have you did? Thanks in advance.
You are missing #.
Try $("#tx").datepicker({dateFormat: 'dd/mm/yy'});
Also use yy instead of yyyy.
y means year (two digit)
yy means year (four digit).
Check this link for more options.

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