I have the following HTML accordian structure
<!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>
<title>Basic jQuery Accordion</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.2/themes/dark-hive/jquery-ui.css" />
<script type="text/javascript">
$(document).ready(
function () {
$("#accordion").accordion({ header: "h3",
autoheight: false,
active: false,
alwaysOpen: false,
fillspace: false,
collapsible: true,
//heightStyle: content //auto, fill, content
});
});
</script>
</head>
<body>
<div style="width: 468px;">
<div id="accordion">
<h3>Javascript</h3>
<div>
<h4>Testt</h4>
</div>
<h3>Other</h3>
<div>
<h4>Stuff</h4>
</div>
</div>
</div>
</body>
</html>
I am trying to build this in a jsp file as shown
<!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>
<title>Basic jQuery Accordion</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.2/themes/dark-hive/jquery-ui.css" />
<script type="text/javascript">
$(document).ready(
function () {
$("#accordion").accordion({ header: "h3",
autoheight: false,
active: false,
alwaysOpen: false,
fillspace: false,
collapsible: true,
//heightStyle: content //auto, fill, content
});
});
</script>
</head>
<body>
<div style="width: 468px;">
<div id="accordion">
<%
ArrayList<String> list = new ArrayList<String>();
list.add("CoolDrinks");
list.add("Snacks");
list.add("Other");
%>
<%
for (String items : list)
{
%>
<h3><%=items%></h3>
<div>
<h4><%=items%></h4>
</div>
<%
}
%>
<%
}
%>
</div>
</div>
</body>
</html>
Could anybody please tell me where its failing ??
Import for ArrayList?
<%#page import="java.util.ArrayList"%>
EDIT: Upon testing you will also need to remove the last set of:
<%
}
%>
So it will look like this:
<%#page import="java.util.ArrayList"%>
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!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>
<title>Basic jQuery Accordion</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.2/themes/dark-hive/jquery-ui.css" />
<script type="text/javascript">
$(document).ready(
function () {
$("#accordion").accordion({ header: "h3",
autoheight: false,
active: false,
alwaysOpen: false,
fillspace: false,
collapsible: true,
//heightStyle: content //auto, fill, content
});
});
</script>
</head>
<body>
<div style="width: 468px;">
<div id="accordion">
<%
ArrayList<String> list = new ArrayList<String>();
list.add("CoolDrinks");
list.add("Snacks");
list.add("Other");
%>
<%
for (String items : list)
{
%>
<h3><%=items%></h3>
<div>
<h4><%=items%></h4>
</div>
<%
}
%>
</div>
</div>
You should start your page with jsp header :
<%#page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
....
Related
I am sending an xlsx file over http request but the file becomes corrupt.
I just dont understand why the file becomes corrupt just sending across.
Please help, I am new at this.
Here is the jsp file :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="myApplication">
<head>
<!-- <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> -->
<title>Preptune</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
angular.module('myApplication',["ngRoute"]).
directive('fileInput',['$parse',function($parse){
return {
restrict:'A',
link: function(scope,elm,attrs) {
elm.bind('change',function() {
$parse(attrs.fileInput)
.assign(scope,elm[0].files)
scope.$apply()
})
}
}
}])
.controller('myController',['$scope','$http',
function($scope,$http) {
$scope.message = "Test message";
$scope.filesChanged = function(elm) {
$scope.files=elm.files;
$scope.$apply();
};
$scope.upload = function() {
var fd = new FormData();
angular.forEach($scope.files,function(file){
fd.append('file',file);
})
$http.post('http://localhost:80/simple-web-services/uploadQuestions', fd,{
transformRequest : angular.identity,
headers:{'Content-Type':undefined}
})
.success(function(d){
console.log(d);
})
};
}
])
.config(function($routeProvider) {
$routeProvider
.when("/preptune", {
templateUrl : "/webPortal/homePage/welcome"
})
.when("/upload", {
templateUrl : "/webPortal/resources/html/uploadQuestion.html"
})
.when("/download", {
templateUrl : "/webPortal/resources/html/downloadTemplate.html"
})
.otherwise({redirectTo:'/'});
});
</script>
</head>
<body ng-controller="myController">
<nav class="navbar navbar-default">
<div class="container-fluid bg-info">
<div class="navbar-header">
<a class="navbar-brand" href="#prep">Prep</a>
</div>
<ul class="nav navbar-nav">
<li>Upload Question Paper</li>
<li>Download Question Template</li>
</ul>
</div>
</nav>
<div ng-view></div>
</body>
</html>
Here is the form : (uploadQuestion.html)
<form method="post">
<input type="file"
file-input="files"
multiple></input>
<button ng-click="upload()"> Upload </button>
<li ng-repeat="file in files" >{{file.name}} </li>
</form>
The exception says
java.lang.RuntimeException: org.apache.cxf.interceptor.Fault: Your InputStream was neither an OLE2 stream, nor an OOXML stream
I am building a web page which will show the users lat/langs sent from the android app. I have managed to receive those lat/lngs and also inserted them in the DB as well using DAO and servlet classes. Now having little knowledge of the java script in a jsp. How can i pass those paramters into this jsp so that it can show them on the map?
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# 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">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript">
</script>
<style>
<% int i= 0;%>
<c:forEach var="usinf" items="${LatLang}">
#map-canvas_<%=i%> {
height: 150px;
width: 250px;
margin: 0px;
padding: 0px
}
<% i= i+1;%>
</c:forEach>
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=set_to_true_or_false">
</script>
<script>
function initialize() {
<% i= 0;%>
<c:forEach var="usinf" items="${LatLang}">
var geocoder<%=i%>;
var mapsss<%=i%>;
var infowindow<%=i%> = new google.maps.InfoWindow();
var marker<%=i%>;
geocoder<%=i%> = new google.maps.Geocoder();
var latlng<%=i%> = new google.maps.LatLng(${usinf.pickuplat},${usinf.pickuplng});
geocoder<%=i%>.geocode({'latLng': latlng<%=i%>}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
mapsss<%=i%>.setZoom(11);
marker<%=i%> = new google.maps.Marker({
position: latlng<%=i%>,
map: mapsss<%=i%>
});
infowindow<%=i%>.setContent(results[1].formatted_address);
infowindow<%=i%>.open(mapsss<%=i%>, marker_<%=i%>);
}else {
alert('No results found');
}
}else {
alert('Geocoder failed due to: ' + status);
}
});
var mapOptions<%=i%> = {
zoom: 8,
center: latlng<%=i%>,
mapTypeId: 'roadmap'
}
mapsss<%=i%> = new google.maps.Map(document.getElementById('map-canvas_<%=i%>'), mapOptions<%=i%>);
<% i= i+1;%>
</c:forEach>
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<title>Insert title here</title>
</head>
<body>
<body onload="initialize()">
<div id="map-canvas_" style="width:100%; height:100%"></div>
</body>
</body>
</html>
My servlet do post method.
protected void Process(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
Authenticate authplots = new Authenticate();
List<UserInfo> getTheLatlangs = authplots.GetAllLangs();
request.setAttribute("LatLang", getTheLatlangs);
RequestDispatcher view = request.getRequestDispatcher("Testmaps.html");
view.forward(request, response);
}
Using JSTL, I did it this way. Maybe it will help.
<script type="text/javascript">
var markers = [
<c:forEach var="row" items="${result.rows}">
['<c:out value="${row.aciklama}" />',
<c:out value="${row.KONUME}" />,
<c:out value="${row.KONUMB}" />,
<c:out value="${row.EVID}" />,
'<c:out value="${row.aptadi}" />',
'<c:out value="${row.mahalle}" />',
'<c:out value="${row.sokak}" />',
'<c:out value="${row.durumu}" />',
'<c:out value="${row.metrekare}" />',
'<c:out value="${row.fiyat}" />',
'<c:out value="${row.odasayisi}" />'],
</c:forEach> ];
</script>
You can look in github.
JSP Google MAPS
I am very new at "jsp" and "jquery", I think the code below should display a number on screen and increase it by one every 3 seconds, but after 2 or 3 repetitions it breaks and starts to show wrong numbers
<%# page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.11.2.js"></script>
<script type="text/javascript">
var auto_refresh = setInterval(
function () {
$('#load_me').load('index.jsp').fadeIn("fast");
}, 3000); // autorefresh the content of the div after
//every 3000 milliseconds(3sec)
</script>
</head>
<body>
<%! int i = 0;%>
<div id="load_me">
<%out.print(++i);%>
</div>
</body>
</html>
I even tried to show time instead of printing a number, but the same problem accrued :
<%# page import="java.text.SimpleDateFormat" %>
<%# page import="java.util.Date" %>
<%# page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.11.2.js"></script>
<script type="text/javascript">
var auto_refresh = setInterval(
function () {
$('#load_me').load('index.jsp').fadeIn("fast");
}, 3000); // autorefresh the content of the div after
//every 3000 milliseconds(3sec)
</script>
</head>
<body>
<div id="load_me">
<%
Date d = new Date();
SimpleDateFormat sp = new SimpleDateFormat("hh:mm:ss");
String t= sp.format(d);
out.print(t);
%>
</div>
</body>
</html>
it seems you want a 'div#load_me' should display a number increment of 1 every 3 seconds.. Try the following plain javaScript for the same:
setInterval((function() {
var currNumber = 0;
return function() {
document.getElementById('load_me').innerHTML = ++currNumber;
}
})(), 3000);
EDIT (To demonstrate the full code) :
<%# page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<!-- we do not need jquery any more :-) -->
</head>
<body>
<div id="load_me">
</div>
<script>
setInterval((function() {
var currNumber = 0;
return function() {
document.getElementById('load_me').innerHTML = ++currNumber;
}
})(), 3000);
</script>
</body>
</html>
And this way you can avoid the unnecessary server calls as well.
This code below works for time showing, but you have to create date.jsp page,
<%# page import="java.text.SimpleDateFormat" %>
<%# page import="java.util.Date" %>
<%# page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.11.2.js"></script>
<script type="text/javascript">
var auto_refresh = setInterval(
function () {
$('#load_me').load('date.jsp').fadeIn("slow");
}, 3000);
</script>
</head>
<body>
<div id="load_me">
<%# include file="date.jsp"%>
</div>
</body>
</html>
date.jsp :
<%# page import="java.util.Date" %>
<%# page import="java.text.SimpleDateFormat" %>
<%# page contentType="text/html;charset=UTF-8" language="java" %>
<html>
</head>
<body>
<%
Date d = new Date();
SimpleDateFormat sp = new SimpleDateFormat("hh:mm:ss");
String t= sp.format(d);
out.print(t);
%>
</body>
</html>
I am using webstorage to save data.When i get the data through form & save it in a variable (in this case 'one') and try to display in the same page , it does that correctly. But when i import the same '.js' file and try to display it in a different page, it doesn't work. How to use webstorage to retrieve the data in a different page ? Also, i don't want to use query string !
First page:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="webstorageAPI.js"></script>
<link href="webstorageAPI.css" rel="stylesheet" type="text/css" />
</head>
<body>
<section id="leftbox">
<section id="leftbox">
<form action="seconddisplayfile.html" method="post">
<p>(key) One: <input type="text" id="one" /></p>
<p>(value)Two:<textarea id="two"></textarea></p>
<p><input type="submit" id="button" value="Save" /></p>
</form>
</section>
<section id="rightbox">
Nothing yet !
</section>
</section>
</body>
</html>
Second page:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="webstorageAPI.js"></script>
<link href="webstorageAPI.css" rel="stylesheet" type="text/css" />
</head>
<body>
<section id="wbox">
Nothing yet!
</section>
</body>
</html>
Javascript code:
// JavaScript Document
function doFirst(){
var button = document.getElementById("button");
button.addEventListener('click',save,false);
}
function save(){
var one = document.getElementById("one").value; //but only contents is to be taken not label n all
var two = document.getElementById('two').value;
localStorage.setItem("one",two); //Store in key-value pair. Anytime you use this you use if by addressing the variable ie key name.
//Retriveing data n displaying stored data
display(one); //now u hav stored two so its time to use one
}
function display(one){
var rightbox = document.getElementById('rightbox'); //refer right box
var two= localStorage.getItem("one"); //Get in key-value pair
rightbox.innerHTML= "Name of variable:"+one+"<br/>Value:"+two;
/*----Second page display-----*/
var wbox = document.getElementById("wbox");
wbox.innerHTML= "Name of variable:"+one+"<br/>Value:"+two;*/
}
window.addEventListener('load',doFirst,false);
#charset "utf-8";
/* CSS Document */
#leftbox{
float:left;
padding:20px;
border:3px solid #F20B84;
}
#rightbox{
float:left;
width:250px;
margin-left:20px;
padding:20px;
border:3px solid #8E1783;
}
Your second page doen't contain any element with id rightbox.so
var rightbox = document.getElementById('rightbox');
will return null.and when try to set innerHTML property of rightbox,js will throw
Uncaught TypeError: Cannot read property 'innerHTML' of null
so change your display to
function display(one){
var rightbox = document.getElementById('rightbox'); //refer right box
var two= localStorage.getItem("one"); //Get in key-value pair
if(rightbox)
rightbox.innerHTML= "Name of variable:"+one+"<br/>Value:"+two;
/*----Second page display-----*/
var wbox = document.getElementById("wbox");
wbox.innerHTML= "Name of variable:"+one+"<br/>Value:"+two;*/
}
You have to call display in second page .
I'm using Jaris flv player to play flv videos.
It can open the page and display normally when I directly open the page(http://mysite.com:8080/TSE/flv/player.jsp).
But if I redirect and open the page from struts action's return, it can not work(http://mysite.com:8080/TSE/multidocdetailDoc.action?selectId=C94DC060947048B188BB2FAF1804B0F3).
The page displays the alternative content (the case of no adobe flash).
What should I do?
the action did nothing except redirect:
public String multidocdetail(){
try {
String selectId = getRequest().getParameter("selectId");
System.out.println(selectId);
} catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
}
return "multidocDetail";
}
struts:
<action name="*Doc" class="casco.com.tse.action.learn.DocAction" method="{1}">
<result name="docDetail">/jsp/learn/docDetail.jsp</result>
<result name="multidocDetail">/flv/player.jsp</result>
</action>
the jsp is just like the example of jaris website:
<%# page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Jaris FLV Player</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="en" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
var flashvarsVideo = {
source: "http://localhost:8080/TSE/flv/mv/CTCS-3.flv",
type: "video",
streamtype: "file",
server: "",//Used for rtmp streams
duration: "52",
poster: "http://localhost:8080/TSE/flv/poster.png",
autostart: "false",
logo: "http://localhost:8080/TSE/flv/logo.jpg",
logoposition: "top left",
logoalpha: "30",
logowidth: "130",
logolink: "http://jaris.sourceforge.net",
hardwarescaling: "false",
darkcolor: "000000",
brightcolor: "4c4c4c",
controlcolor: "FFFFFF",
hovercolor: "67A8C1"
};
var params = {
menu: "false",
scale: "noScale",
allowFullscreen: "true",
allowScriptAccess: "always",
bgcolor: "#000000",
quality: "high",
wmode: "opaque"
};
var attributes = {
id:"JarisFLVPlayer"
};
//swfobject.embedSWF("JarisFLVPlayer.swf", "altContentOne", "576px", "360px", "10.0.0", "expressInstall.swf", flashvarsVideo, params, attributes);
swfobject.embedSWF("JarisFLVPlayer.swf", "altContentOne", "750px", "520px", "10.0.0", "expressInstall.swf", flashvarsVideo, params, attributes);
</script>
<style>
html, body { height:100%; }
body { margin:0; }
</style>
</head>
<body>
<br />
<center>
<h3>CTCS三级列控体系介绍</h3>
<div id="altContentOne">
<h1>Jaris FLV Player</h1>
<p>Alternative content</p>
<p><a href="http://www.adobe.com/go/getflashplayer"><img
src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"
alt="Get Adobe Flash player" /></a></p>
</div>
</center>
</body>
</html>