Map not showing up using Leaflet in JSP page.Tiles are available - javascript

We are trying to show offline maps in Web application. Succeeded in extracting the required portion and converting them into tiles.
The tiles folder is located inside the WEB-INF and all the required folder for tiles is present inside the tiles folder.
Leaflet script is present inside the script folder.
css script is present inside the css folder.
The code snippet of my page is:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%# taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%# taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%# taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!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>Demon</title>
<link href="${pageContext['request'].contextPath}/css/general.css"
rel="stylesheet" type="text/css" />
<link href="${pageContext['request'].contextPath}/css/leaflet.css"
rel="stylesheet" type="text/css" />
<script src="${pageContext['request'].contextPath}/script/leaflet.js" language="javascript"></script>
<script src="${pageContext['request'].contextPath}/script/leaflet-src.js" language="javascript"></script>
<script>
function Demo()
{
var map = L.map('map');
L.tileLayer('tiles/{z}/{x}/{y}.png').addTo(map);
}
</script>
</head>
<body>
<f:view>
<div id="map" style="width:800px;height:600px;">
<a4j:commandButton value="HIT" onclick="Demo()"></a4j:commandButton>
</div>
</f:view>
</body>
</html>
Now on my page, when I click on HIT button , the map portion is taken up and displayed in the browser in the space allocated but NOTHING IN THE MAPS SHOW..
Powered by Leaflet and Zoom in/out icon definitely comes.
NO MAP IS SHOWN. The tile images which are present in the folder do contain a map which was extracted and converted into the tiles.
Hence I am unable to figure out why nothing is appearing at all. Please guide me.
I think i am very close to showing a map and nonetheless it has been one hell of a ride to explore this and arrive till this point.

I did this it may help, I used \ as an escape character before $ so JSP can understand the url containg ${}, or it will consider it an empty variable?
Problem:
var newLayer = new OpenLayers.Layer.OSM("Damascus", "tiles/${z}/${x}/${y}.png", {numZoomLevels: 19, alpha: true, isBaseLayer: true});
Solution:
var newLayer = new OpenLayers.Layer.OSM("Damascus", "tiles/\${z}/\${x}/\${y}.png", {numZoomLevels: 19, alpha: true, isBaseLayer: true});

Related

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.

struts2-jquery datepicker tag not loading in struts2-jquery tabbedpannel tag

I have a page index.jsp, I've used struts2-jquery tabbedpannel tag in this jsp to display another two JSPs (first.jsp & second.jsp) as tabs.
index.jsp
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# taglib prefix="s" uri="/struts-tags"%>
<%# taglib prefix="sj" uri="/struts-jquery-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<sj:head />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Index Page</title>
</head>
<body>
<sj:tabbedpanel
id="remotetabs"
selectedTab="0"
show="true"
hide="'fade'"
collapsible="true"
sortable="true">
<sj:tab id="tab1" href="first.jsp" label="First JSP"/>
<sj:tab id="tab2" href="second.jsp" label="Second JSP"/>
</sj:tabbedpanel>
</body>
</html>
Another two JSPs contain a form each with struts2-datepicker tag. Here is one of them...
first.jsp
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# taglib prefix="s" uri="/struts-tags"%>
<%# taglib prefix="sj" uri="/struts-jquery-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<link rel="stylesheet" type="text/css" href="css/view.css" media="all">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>First JSP</title>
</head>
<body>
<div>
<s:form action="firstAction" >
<sj:datepicker
key="timeStamp"
name="timeStamp"
label="Time Stamp"
timepicker="true"
displayFormat="yy-mm-dd"
timepickerFormat="HH:mm"/>
<s:submit value="Submit"></s:submit>
</s:form>
</div>
</body>
</html>
The problem is that, the first time index.jsp is loaded, struts2-jquery datepicker tag on first.jsp works fine, but as I switch to second tab; which will load second.jsp in AJAX (second.jsp contains same code as first.jsp) struts2-jquery datepicker tag on second.jsp doesn't work.
Now, when I switch back to First Tab to display first.jsp, struts2-jquery datepicker tag doesn't work either. It just stops working after first load.
The problem is that you are calling JSP pages, while you should call Struts2 Actions.
Struts2 is MVC. You souldn't call a View from a View, you should instead call a Controller that will dispatch to a View.
The first time, it works because the variables feeding struts and struts-jquery tags in first.jsp and second.jsp are taken from IndexAction.
You should instead define FirstAction and SecondAction and call them through AJAX in the href attribute:
<s:url var="firstActionUrl" action="first" namespace="/" />
<sj:tab id="tab1" href="%{#firstActionUrl}" label="First JSP"/>
<s:url var="secondActionUrl" action="second" namespace="/" />
<sj:tab id="tab2" href="%{#secondActionUrl}" label="Second JSP"/>

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!

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.

Categories