I'm working with Struts 2 and jQuery. The plugin of timepicker doesn't work.
My JSP:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# taglib prefix="sj" uri="/struts-jquery-tags" %>
<!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=ISO-8859-1" />
<title>TestPicker</title>
<sj:head jqueryui="true" locale="es" jquerytheme="redmond" />
<script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
<style type="text/css">
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { float: left; clear:left; padding: 0 0 0 5px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 45%; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
.ui-timepicker-rtl{ direction: rtl; }
.ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }
.ui-timepicker-rtl dl dt{ float: right; clear: right; }
.ui-timepicker-rtl dl dd { margin: 0 45% 10px 10px; }
</style>
<script type="text/javascript">
$(function(){
$('#txtTime').timepicker({});
});
</script>
</head>
<body>
<input id="txtTime" type="text" name="txtTime" value="" ></input>
</body>
</html>
It generates this HTML:
<script type="text/javascript" src="/Asistencia/struts/js/base/jquery-1.10.2.min.js">
</script>
<script type="text/javascript"
src="/Asistencia/struts/js/base/jquery.ui.core.min.js?s2j=3.6.1"></script>
<script type="text/javascript"
src="/Asistencia/struts/js/plugins/jquery.subscribe.min.js?s2j=3.6.1"></script>
<script type="text/javascript"
src="/Asistencia/struts/js/struts2/jquery.struts2.min.js?s2j=3.6.1"></script>
<script type="text/javascript">
$(function() {
jQuery.struts2_jquery.version="3.6.1";
jQuery.scriptPath = "/Asistencia/struts/";
jQuery.struts2_jquery.local = "es";
jQuery.struts2_jquery.gridLocal = "es";
jQuery.struts2_jquery.timeLocal = "es";
jQuery.ajaxSettings.traditional = true;
jQuery.ajaxSetup ({
cache: false
});
jQuery.struts2_jquery.require("js/struts2/jquery.ui.struts2.min.js?s2j=3.6.1");
});
</script>
<link id="jquery_theme_link" rel="stylesheet"
href="/Asistencia/struts/themes/redmond/jquery-ui.css?s2j=3.6.1"
type="text/css"/>
<script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
I think this code ?s2j=3.6.1 gets the problem.
Page of TimePicker addon
Now, I will try with ama3+anytime plugin.
This parameter is not the problem, it is just for internal use and tells the plugin about version of plugin. The problem is in your jQuery code because you are trying to bind a timepicker on the element before this element is created. Try
$(document).ready(function(){
$('#txtTime').timepicker({
timeFormat: "hh:mm tt"
});
});
Related
I'm a beginner in web-programming and I've got this problem with a search bar. The thing is how do I finish it so it'd give out a drop bar with prospective results to choose from and to select other div to give out the search results themselves? Should be something similar as the tag search bar down this page.
The code is below and thanks in advance! WHERE "TODO"!!!
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
var delay = (function(){ // to set timer
var timer = 0;
return function(callback, ms){
clearTimeout(timer);
timer = setTimeout(callback, ms);
};
})();
$(document).ready(function() {
var $search = $("#search");
$search.keyup(function() {
delay(function () {
var $string = $("#search").val();
if ( $string == "" || /\s+$/.test($string)) return;
var $tag = $string.match(/\S+$/)[0]
$.getJSON('/get_tags_by_substring', {'tag':$tag}, function ($data) {
console.log($data);
/* TODO */
});
}, 500);
});
}); </script> </head>
<style>
.search_bar{
bottom: 5px;
right: 100px;
/* margin-right: 10px; */
float: right;
} </style>
<header> <style type="text/css"> .form {
float: right;
margin-top: 0px;
margin-right: 10px; } </style>
<div id="wrapper">
<div id = "header" style="display: table; width: 1150px;">
<div id="logo" style="display: table-cell;">
<a href="/">
{% load staticfiles %}
<!--img src="{% static '.../images/logo_1.png'%}" alt="... logo" align="left"-->
</a>
</div>
<div style="display: table-cell;">
<nav id="navig" style="margin:0px;">
<ul>
<li class="button">1</li>
<li class="button">2</li>
<li class="button">3</li>
<li class="button">4</li>
</ul>
</nav>
</div>
<div class="search_bar">
<input type="text" id="search" placeholder="tag..."/><br/>
<div id="search_results"></div>
</div>
</div>
</div> </header>
I'm using itext 5.5.6 to generate PDF files from HTML documents built trough thymeleaf.
The html is displayed correctly in browsers.
However, when generating the PDF, it displays all the styles correctly, except the definition of "font-size".
public static void main(String[] args) throws IOException, DocumentException {
...
// itextpdf e itext tools
Document document = new Document();
PdfWriter writer = PdfWriter.getInstance(document, cvos);
document.open();
// CSS
CSSResolver cssResolver = new StyleAttrCSSResolver();
CssFile cssFile = XMLWorkerHelper.getCSS(cssFis);
cssResolver.addCss(cssFile);
// HTML
HtmlPipelineContext htmlContext = new HtmlPipelineContext(null);
htmlContext.setTagFactory(Tags.getHtmlTagProcessorFactory());
// Pipelines
PdfWriterPipeline pdf = new PdfWriterPipeline(document, writer);
HtmlPipeline html = new HtmlPipeline(htmlContext, pdf);
CssResolverPipeline css = new CssResolverPipeline(cssResolver, html);
// XML Worker
XMLWorker worker = new XMLWorker(css, true);
XMLParser p = new XMLParser(worker);
p.parse(bais);
document.close();
}
body{
font-family: Courier;
font-size: 8pt;
}
.tabela {
width: 90%;
border: 1px solid #000000;
}
.cabecalho {
background-color: #d3d3d3;
text-align: center;
font-weight: bolder;
}
.linha_numero {
text-align: center;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cadastros Veiculo</title>
<link rel="stylesheet" type="text/css" href="estilo.css" />
</head>
<body>
<table id="tabela" class="tabela">
<tr class="cabecalho">
<td rowspan="1" colspan="1">ID</td>
<td rowspan="1" colspan="1">PLACA</td>
<td rowspan="1" colspan="1">PROPRIETARIO</td>
<td rowspan="1" colspan="1">CPF</td>
<td rowspan="1" colspan="1">RENAVAM</td>
</tr>
<tr>
<td class="linha_numero" rowspan="1" colspan="1">0</td>
<td class="linha_numero" rowspan="1" colspan="1">X</td>
<td rowspan="1" colspan="1">X</td>
<td class="linha_numero" rowspan="1" colspan="1">0</td>
<td class="linha_numero" rowspan="1" colspan="1">0</td>
</tr>
</table>
</body>
</html>
I'm uploading the image file and then previewing on jquery dialog for cropping using jcrop. For small size its working fine but when i'm uploading large file the dialog become stretch.
header includes:
<head>
<script type="text/javascript" src="<html:rewrite page='/scripts/crop/jquery.Jcrop.js'/>"></script>
<script type="text/javascript" src="<html:rewrite page='/scripts/jquery-plugins/jquery-ui-1.10.3.custom.min.js'/>"></script>
<link rel="stylesheet" src="<html:rewrite page='/styles/crop/jquery.Jcrop.css'/>"/>
<%--<link rel="stylesheet" type="text/css" src="<html:rewrite page='/styles/crop/jQueryUI.css'/>"/>--%>
<style type="text/css">
#media print {
.label.active {
background-color: transparent !important;
border-right: white !important;
}
}
table.form img {
width: 128px;
height: 128px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
box-shadow: 0 0 2px rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 2px rgba(0, 0, 0, .8);
-moz-box-shadow: 0 0 2px rgba(0, 0, 0, .8);
}
.ui-dialog .ui-dialog-content {
max-width: 500px !important;
max-height: 600px !important;
/*width: 600px !important;*/
}
</style>
javascript code:
<script language="Javascript">
var jcrop_api;
function initJcrop()
{
jcrop_api = $.Jcrop('#cropBox',{
onChange: setCoords,
onSelect: setCoords
})
jcrop_api.setOptions({
allowSelect: true, allowMove: true, allowResize: true, aspectRatio: 1
});
}
// });
function setCoords(c)
{
jQuery('#x1').val(c.x);
jQuery('#y1').val(c.y);
jQuery('#x2').val(c.x2);
jQuery('#y2').val(c.y2);
jQuery('#w').val(c.w);
jQuery('#h').val(c.h);
};
function imageHandler(e2)
{
initJcrop();
// var elem = ;
$("#dialog").dialog({
show: {
modal:true,
resizable: true
,
maxWidth:600,
maxHeight: 500,
width: 600,
height: 500
// effect: 'fade',
// duration: 2000
} ,
// maxHeight:document.getElementById('cropBox').height,
// maxWidth:document.getElementById('cropBox').width,
close: function( event, ui ) {
jcrop_api.destroy();
$('#dialog').dialog('close');
}
});
// elem.dialog('open');
}
function readFile(){
var preview = document.querySelector('#cropBox');
var file = document.querySelector('#imageId').files[0];
var reader = new FileReader();
// fr.readAsDataURL(filename);
reader.onload = function () {
preview.src = reader.result;
imageHandler();
}
if (file) {
reader.readAsDataURL(file);
} else {
preview.src = "";
}
document.getElementById("isSubmit").value = "false";
}
function cropPic(){
document.getElementById("postForm").submit();
}
$(".ui-dialog-titlebar").hide();
function closeDialog(){
jcrop_api.destroy();
$('#dialog').dialog('close');
}
function setCoordinates(c) {
//alert("x " + c.x + " y " + c.y);
//alert("w " + c.w + " h " + c.h);
document.myForm.x.value = c.x;
document.myForm.y.value = c.y;
document.myForm.w.value = c.w;
document.myForm.h.value = c.h;
};
function checkCoordinates() {
if (document.myForm.x.value == "" || document.myForm.y.value == "") {
alert("Please select a crop region");
return false;
} else {
return true;
}
};
</script>
html
<span id="reuploadImg" ><html:file name="uf" property="file" size="37" onchange="readFile()" styleId="imageId" /></span>
<td>
<input type="hidden" name="x1" id="x1"/>
<input type="hidden" name="y1" id="y1"/>
<input type="hidden" name="x2" id="x2"/>
<input type="hidden" name="y2" id="y2"/>
<input type="hidden" name="w" id="w"/>
<input type="hidden" name="h" id="h"/>
<input type="hidden" name="isSubmit" id="isSubmit" value="true"/>
</td>
<div id="dialog" style="display: none;max-height: 600px;max-width: 600px" title="Preview" >
<img id="cropBox" style="max-height: 600px;max-width: 600px"/>
<br/><br/>
<div style="width: 100%;text-align: center">
<input type="button" value="Save" onclick="cropPic()" class="stdbutton"/>
<input type="button" value="Cancel" onclick="closeDialog()" class="stdbutton"/>
</div>
</div>
Here are the images:
My Highchart is displaying fine in Chrome, however when I try to open it in Internet Explorer only the title and css border shows up. My main problem is that it doesn't show up when I'm trying to display it in a jEditorPane in a java application; it only shows the border. I can display simple HTML pages in the jEditorPane, but I'm guessing this has something to do with the javascript / jquery?
<!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=utf-8">
<title>Chart Title</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<link href='http://fonts.googleapis.com/css?family=Oswald:400' rel='stylesheet' type='text/css'>
<script type="text/javascript">
$(function () {
Highcharts.setOptions({
colors: ['#1a1334','#26294a','#01545a','#017351','#03c383','#aad962','#fbbf45','#ef6a32','#ed0345','#a12a5e','#710162','#110141']
});
var chart;
$(document).ready(function () {
$('#container').highcharts({
chart: {
type: 'pie',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
backgroundColor: '#f5f5f5'
},
title: {
text: 'Chart Title',
style: {
fontSize: '35px',
fontWeight: 'bold',
fontFamily: 'Oswald'
}
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.y}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
fontSize: '15px'
}
},
showInLegend: true
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
y: 75,
backgroundColor: '#e4e4e4',
borderRadius: '5px',
itemStyle: {
fontSize: '15px',
fontWeight: 'light'
}
},
credits: {
enabled: false
},
series: [{
name: 'Chart Title',
innerSize: '40%',
data: [
['Work',11],
['Eat',2],
['Commute',2],
['Watch TV',2],
['Sleep',7],
['Other', 30],
['New', 45],
['Extra', 56], ]
}]
});
});
});
</script>
</head>
<body>
<div id="container" style="width: 945px; height: 525px; border-color: #333; border-style: solid; border-width: 10px 5px 5px 10px;"></div>
</body>
</html>
jEditorPane code:
jEditorPane1.setEditable(false);
try {
jEditorPane1.setPage(getClass().getResource("html/pie.html"));
} catch (IOException e) {
System.out.println(e);
}
Most of the solutions for Highcharts not displaying involved the ordering of the scripts, but I'm pretty sure that's not my problem.
Any ideas?
Try to use the WebView from JavaFX.
http://docs.oracle.com/javafx/2/webview/jfxpub-webview.htm
IIRC it is based on Webkit and should be able to render highcharts correctly
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%# page import="java.awt.*"%>
<%# page import="java.io.*"%>
<%# page import="org.jfree.chart.*"%>
<%# page import="org.jfree.chart.entity.*"%>
<%# page import="org.jfree.data.general.*"%>
<%
DefaultPieDataset pieDataset = new DefaultPieDataset();
pieDataset.setValue("JavaWorld", new Integer(75));
pieDataset.setValue("Other", new Integer(25));
JFreeChart chart = ChartFactory.createPieChart("Sample Pie Chart",pieDataset,true,true,false);
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Pie Chart</title>
</head>
<body>
<IMG SRC="piechart.png" WIDTH="600" HEIGHT="400" BORDER="0"
USEMAP="#chart">
</body>
</html>
Output for this is a blank screen, It not thrown any exception..
How can i display pie chart in this page?
Thanks in advance.
after creating the chart save the chart as follow:
ChartUtilities.saveChartAsJPEG(new File(path/piechart.png"),chart,400, 300);
and then
use
<IMG SRC=path/"piechart.png" WIDTH="600" HEIGHT="400" BORDER="0"
USEMAP="#chart">
**Other way is as discussed in ** How to display line graph using JFreeChart in jsp?
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("image/png");
ServletOutputStream os = response.getOutputStream();
ImageIO.write(getChart(request), "png", os);
os.close();
}
private RenderedImage getChart(HttpServletRequest request) {
String chart = request.getParameter("chart");
// also you can process other parameters like width or height here
if (chart.equals("myDesiredChart1")) {
JFreeChart chart = [create your chart here];
return chart.createBufferedImage(width, height)
}
and display as
<img src="/ChartDrawerServlet?chart=myDesiredChart1&width=..and other processed parameters" ..>
see the answer of Martin Lazar here
Finally i got the answer....
.....In servlet....
public void getPieChart() {
DefaultPieDataset pieDataset = new DefaultPieDataset();
pieDataset.setValue("JavaWorld", new Integer(75));
pieDataset.setValue("Other", new Integer(25));
JFreeChart chart = ChartFactory.createPieChart("Discounts Used by Category ", data, true, true, false);
//chart.setBackgroundPaint(new Color(222, 222, 255));
final PiePlot plot = (PiePlot) chart.getPlot();
plot.setBackgroundPaint(Color.white);
plot.setCircular(true);
try {
final ChartRenderingInfo info = new ChartRenderingInfo(new StandardEntityCollection());
final File file1 = new File(getServletContext().getRealPath(".") + "/images/charts/piechart.png");
ChartUtilities.saveChartAsPNG(file1, chart, 600, 400, info);
} catch (Exception e) {
System.out.println(e);
}
}
.....in html page......
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Pie Chart</title>
</head>
<body>
<IMG SRC="piechart.png" WIDTH="600" HEIGHT="400" BORDER="0"
USEMAP="#chart">
</body>
</html>
............................................................................
......................Or using only jsp page........
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%# page import="java.awt.*"%>
<%# page import="java.io.*"%>
<%# page import="org.jfree.chart.*"%>
<%# page import="org.jfree.chart.entity.*"%>
<%# page import="org.jfree.data.general.*"%>
<%
DefaultPieDataset pieDataset = new DefaultPieDataset();
pieDataset.setValue("JavaWorld", new Integer(75));
pieDataset.setValue("Other", new Integer(25));
JFreeChart chart = ChartFactory.createPieChart("Discounts Used by Category ", data, true, true, false);
//chart.setBackgroundPaint(new Color(222, 222, 255));
final PiePlot plot = (PiePlot) chart.getPlot();
plot.setBackgroundPaint(Color.white);
plot.setCircular(true);
try {
final ChartRenderingInfo info = new ChartRenderingInfo(new StandardEntityCollection());
final File file1 = new File(getServletContext().getRealPath(".") + "/images/charts/piechart.png");
ChartUtilities.saveChartAsPNG(file1, chart, 600, 400, info);
} catch (Exception e) {
System.out.println(e);
}
}
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Pie Chart</title>
</head>
<body>
<IMG SRC="piechart.png" WIDTH="600" HEIGHT="400" BORDER="0"
USEMAP="#chart">
</body>
</html>