我一直在创建一个应用程序，我在其中使用jQuery小部件进行UI。一切都工作正常，直到它被卡住，网页上没有数据可见（只有文字可见，但所有jQuery元素都丢失了。我无法弄清楚问题是什么，因为我已经包含了所有必要的内容JAR文件和JAVASCRIPT文件。我将我的代码片段放在这里。任何帮助都会非常明显。提前致谢。enter code here
<!DOCTYPE html>
<html lang="en">
<%@ page import="java.util.ArrayList" %>
<%@ page import="java.util.*" %>
<%@ page import="org.json.simple.JSONArray" %>
<% JSONArray jasonList = (JSONArray)(request.getAttribute("listjson"));
String chartformat = (String)(request.getAttribute("chartformat") == null ? "Default , 100" : request.getAttribute("chartformat")) ;
System.out.println("chartformat in jsp = "+chartformat);
%>
<head>
<title id='Description'>This example shows how to create a Grid from JSON data.</title>
<link rel="stylesheet" href="css/configuratorUReport.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/demos.js"></script>
<script type="text/javascript" src="js/jqxcore.js"></script>
<script type="text/javascript" src="js/jqxbuttons.js"></script>
<script type="text/javascript" src="js/jqxscrollbar.js"></script>
<script type="text/javascript" src="js/jqxlistbox.js"></script>
<script type="text/javascript" src="js/jqxdropdownlist.js"></script>
<script type="text/javascript" src="js/jqxdatetimeinput.js"></script>
<script type="text/javascript" src="js/jqxcalendar.js"></script>
<script type="text/javascript" src="js/jqxtooltip.js"></script>
<script type="text/javascript" src="js/globalize.js"></script>
<script type="text/javascript" src="js/jqxmenu.js"></script>
<script type="text/javascript" src="js/jqxcheckbox.js"></script>
<script type="text/javascript" src="js/jqxgrid.js"></script>
<script type="text/javascript" src="js/jqxgrid.selection.js"></script>
<script type="text/javascript" src="js/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="js/jqxdata.js"></script>
<script type="text/javascript" src="js/jqxdata.export.js"></script>
<script type="text/javascript" src="js/jqxgrid.export.js"></script>
<script type="text/javascript" src="js/jqxgrid.sort.js"></script>
<script type="text/javascript" src="generatedata.js"></script>
<script type="text/javascript" src="js/jqxchart.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var jsondata ='<%=jasonList%>';
var source =
{
datatype: "json",
datafields: [
{ name: 'region', type: 'string' },
{ name: 'sumComplete', type: 'int' },
{ name: 'sumInComplete', type: 'int' },
{ name: 'sumVoided', type: 'int' },
{ name: 'sumTotalConfigs', type: 'int' },
{ name: 'sumUsers', type: 'int' }
],
id: 'id',
localdata : jsondata
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid(
{
width: 670,
source: dataAdapter,
columnsresize: true,
columns: [
{ text: 'REGION', datafield: 'region', width: 180 },
{ text: 'COMPLETED', datafield: 'sumComplete', width: 100 },
{ text: 'INCOMPLETED', datafield: 'sumInComplete', width: 100 },
{ text: 'VOIDED', datafield: 'sumVoided', width: 100 },
{ text: 'TOTAL CONFIGURATIONS', datafield: 'sumTotalConfigs', minwidth: 180 },
{ text: 'FUJITSU INTERNAL USERS', datafield: 'sumUsers', minwidth: 180 }
]
});
$("#excelExport").jqxButton({ theme: theme });
$("#excelExport").click(function () {
$("#jqxgrid").jqxGrid('exportdata', 'xls', 'jqxGrid');
});
//CODE FOR drawing Chart
var chartdata ='<%=chartformat%>';
//var chartdata = "APAC-CHINA, 40 \n APAC, 60";
var source1 =
{
datatype: "csv",
datafields: [
{ name: 'Region' },
{ name: 'Share' }
],
localdata : chartdata
// url: chartdata
};
// var dataAdapter1 = new $.jqx.dataAdapter(source1, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.localdata + '" : ' + error); } });
//var dataAdapter1 = new $.jqx.dataAdapter(source1);
var dataAdapter1 = new $.jqx.dataAdapter(source1, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.localdata + '" : ' + error); } });
// prepare jqxChart settings
var settings = {
title: "Configurator Usage: Total Configurations per Region",
description: "",
enableAnimations: true,
showLegend: false,
legendPosition: { left: 520, top: 140, width: 100, height: 100 },
padding: { left: 5, top: 5, right: 5, bottom: 5 },
titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
source: dataAdapter1,
colorScheme: 'scheme02',
seriesGroups:
[
{
type: 'pie',
showLabels: true,
series:
[
{
dataField: 'Share',
displayText: 'Region',
labelRadius: 100,
initialAngle: 15,
radius: 130,
centerOffset: 0,
formatSettings: { sufix: '%', decimalPlaces: 1 }
}
]
}
]
};
// setup the chart
$('#jqxChart').jqxChart(settings);
});
</script>
</head>
<body class='default'>
<form name = "CURform" id="CURform" method = "post" action="ConfiguratorStatusReport">
<div align="center"><h3>Configurator Usage Report</h3>
<div id='content'>
<script type="text/javascript">
var item = "";
$(document).ready(function () {
var source = [
"PRIMEQUEST",
"ETERNUS",
"PRIMERGY"
];
// Create a jqxDropDownList
$("#jqxdropdownlist").jqxDropDownList({ source: source, selectedIndex: 0, width: '200', height: '25'});
// bind to 'select' event.
$('#jqxdropdownlist').bind('select', function (event) {
var args = event.args;
item = $('#jqxdropdownlist').jqxDropDownList('getItem', args.index);
//alert('Selected: ' + item.label);
});
});
</script>
<div id='jqxWidget'>
</div>
<div id='jqxdropdownlist'>
</div>
</div>
<br><br>
<table>
<tr>
<!-- <td id=8ptN align=left> Start Date </td><td id=8ptN><input type=text class="inpt" value="" name="fromdate" title="Enter Date in MM/DD/YYYY format" size=20>
<img src="calendar.jpg" border="0" alt=""> </td>
<td id=8ptN align=right> End Date </td><td id=8ptN><input type=text class="inpt" value="" name="todate" title="Enter Date in MM/DD/YYYY format" size=20>
<img src="calendar.jpg" border="0" alt=""></td> -->
<td id=8ptN align=left> Start Date <div>
<script type="text/javascript">
$(document).ready(function () {
// Create a jqxDateTimeInput
$("#startdate").jqxDateTimeInput({width: '250px', height: '25px'});
$("#enddate").jqxDateTimeInput({width: '250px', height: '25px'});
});
</script>
<div id='startdate'>
</div>
</div>
</td>
<td id=8ptN align=left> End Date <div>
<script type="text/javascript">
function submitform(){
var item2 = $('#enddate').jqxDateTimeInput('getText');
var item1 = $('#startdate').jqxDateTimeInput('getText');
$('#prdType').val(item.label);
$('#SDType').val(item1);
$('#EDType').val(item2);
// alert('submitform--Selected: ' + $('#EDType').val());
$('#CURform').submit();
}
</script>
<div id='enddate'>
</div>
</div>
</td>
</tr>
<tr></tr>
<tr></tr>
<tr>
<td><input type = "hidden" id = "prdType" name = "prdType"/>
<input type = "hidden" id = "SDType" name = "SDType"/>
<input type = "hidden" id = "EDType" name = "EDType"/></td>
<td align=center><input id = 'jqxButton' type="button" onclick ="submitform()" value = "Go"> </td>
<td><input type="button" value = "Reset"></td>
</tr>
</table>
<table>
<tr>
<td>
<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
<div id="jqxgrid"></div>
<div style='margin-top: 20px;'>
<div style='float: left;'>
<input type="button" value="Export to Excel" id='excelExport' />
<br /><br />
<!-- <input type="button" value="Export to XML" id='xmlExport' />-->
</div>
</div>
</div>
</td>
<td> <div id='host' style="margin: 0 auto; width: 699px; height: 400px;">
<div id='jqxChart' style="width: 680px; height: 400px; position: relative; left: 0px;
top: 0px;">
</div>
</div>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>