Thread: JSON data rendering blues
hi friends ,
sticky issue .
kindly advice.
have jsp file gives me template return .
there script loads json data me.
when script embedded , data in head gets suppressed.
source :
<%@ page language="java"contenttype="text/html; charset=iso-8859-1"
pageencoding="iso-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
<title>document dashboard - franklin templeton</title>
<meta charset="utf-8">
<!-- including style sheets here . -->
<link rel="stylesheet" href="http://localhost:8080/springapp/css/jquery-ui-1.8.14.custom.css" type="text/css" />
<!-- including js files here . -->
<script type="text/javascript" src="http://localhost:8080/springapp/js/jquery-1.5.1.min.js">
</script>
<script type="text/javascript" src="http://localhost:8080/springapp/js/jquery-ui-1.8.14.custom.min.js">
</script>
<script type="text/javascript" src="http://localhost:8080/springapp/js/uki.dev.js">
</script>
<script type="text/javascript" src="http://localhost:8080/springapp/js/searchable.js">
</script>
<script type="text/javascript" src="http://localhost:8080/springapp/js/document.js">
</script>
<script type='text/javascript'src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'>
</script>
<style type="text/css">
body {
font-size:11px;
}
#tabs > div {
padding:0;
}
#doctabs {
border:0;
}
.ui-tabs {
border:0;
}
input[type=text] {
padding:0.4em 1em 0.4em 0.3em;
border:1px solid #c5dbec;
}
#kiid > form input[type=text], #pilotmodules > form input[type=text], #translationmodules > form input[type=text] {
width:400px;
}
#tabs > div {
padding:1em 1.4em;
}
#tabs #documents, #tabs #modules {
padding:0;
}
.funds_filter ul {
padding:0;
margin:0;
}
.funds_filter ul ul {
padding-left:2em;
list-style:none;
}
.rule {
padding:0.3em 1em 0.5em 0;
border-bottom:1px solid #a6c9e2;
margin:0 0 0.5em 0;
}
/*filter panels*/
#filtertabs .ui-tabs-panel, #filterspilot .ui-tabs-panel, #filterstransaltion .ui-tabs-panel {
padding-right:0;
padding-left:0;
overflow-y:auto;
overflow-x:hidden;
max-height: 350px;
padding-bottom;
}
/*filter tab dates*/
#filtertabs .datefield {
padding:0.3em 0 0.5em;
}
#filtertabs .datefield label {
margin-left:0.3em;
}
/*get data dialog*/
#getdata {
margin-top:1em;
}
#getdatatable {
min-height:400px;
}
/*change impact panels*/
#changeimpacttabs .ui-tabs-panel {
padding-left:0;
padding-right:0;
padding-bottom:0;
}
#pilottable {
min-height:365px;
}
</style>
<!-- adding other styles here make renderable . -->
<style>
.uki-table-column-32 {width:489px;}
</style>
<style>
.uki-table-column-33 {width:89px;}
</style>
<style>
.uki-table-column-34 {width:89px;}
</style>
<style>
.uki-table-column-35 {width:89px;}
</style>
<style>
.uki-table-column-36 {width:89px;}
</style>
<style>
.uki-table-column-37 {width:89px;}
</style>
<style>
.uki-table-column-38 {width:89px;}
</style>
</head>
<!-- body tag starts here. -->
<!-- creating first pane. consists of tasks,documents,modules. -->
<body class="" style="">
<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<li class="ui-state-default ui-corner-top ui-state-disabled">
<a href="#">
<span>tasks</span>
</a>
</li>
<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">
<a href="#documents">
<span>documents</span>
</a>
</li>
<li class="ui-state-default ui-corner-top ui-state-disabled">
<a href="#">
<span>modules</span>
</a>
</li>
</ul>
<!-- creating second pane. consists of kiid,pib,commentry. -->
<div id="documents" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
<div id="doctabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">
<a href="#kiid">
<span>kiid</span>
</a>
</li>
<li class="ui-state-default ui-corner-top ui-state-disabled">
<a href="#">
<span>pib</span>
</a>
</li>
<li class="ui-state-default ui-corner-top ui-state-disabled">
<a href="#">
<span>commentry</span>
</a>
</li>
</ul>
<div id="kiid" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
<form action="">
<div>
<label for="finddoc">find</label>
<input id="finddoc" type="text">
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="submit" role="button" aria-disabled="false">
<span class="ui-button-text">search</span>
</button>
<button id="filterby" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">
<span class="ui-button-text">filter by</span>
</button>
</div>
</form>
<div style="padding:1em 0;">
<div style="width:50%;display:inline-block;">
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">
<span class="ui-button-text">generate</span>
</button>
<button id="getlatestdata" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">
<span class="ui-button-text">get latest data</span>
</button>
</div>
<div style="width:49%;display:inline-block">
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">
<span class="ui-button-text">approve</span>
</button>
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">
<span class="ui-button-text">sent review</span>
</button>
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">
<span class="ui-button-text">publish</span>
</button>
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">
<span class="ui-button-text">download</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- doing json loading here . -->
<script type="text/javascript">
//setup main tabs
$(function() {
$("#tabs").tabs({
ajaxoptions: {
error: function( xhr, status, index, anchor ) {
$(anchor.hash).html("no ajax response.");
}
},
selected: 1
});
});
//setup document tabs
$(function() {
$("#doctabs").tabs({
ajaxoptions: {
error: function( xhr, status, index, anchor ) {
$(anchor.hash).html("no ajax response.");
}
}
});
});
//table uki
uki(
{
view: 'table',
rect: '1000 1000',
anchors: 'left right top bottom',
columns: [
{ view: 'table.customcolumn', label: 'working document', sort: 'asc', resizable: true, width:500},
{ view: 'table.numbercolumn', label: 'status', resizable: true, formatter: formatstatus },
{ view: 'table.customcolumn', label: 'data received', resizable: true, formatter: formatdate },
{ view: 'table.customcolumn', label: 'generated pdf', resizable: true, formatter: formatdate },
{ view: 'table.numbercolumn', label: 'status', resizable: true, formatter: formatstatus },
{ view: 'table.customcolumn', label: 'date published', resizable: true, formatter: formatdate },
{ view: 'table.customcolumn', label: 'date expired', resizable: true, formatter: formatdate }
],
multiselect: true,
style: {fontsize: '11px', lineheight: '11px'}
}
).attachto(document.getelementbyid("docstable"), '1000 1000');
// custom status
function formatstatus(t) {
switch(t) {
case "1":
return '<span style="color:green;font-size:22px">•</span>';
break;
case "2":
return 'pending';
break;
case "3":
m = "mar"
break;
case "4":
m = "apr"
break;
case "5":
m = "may";
break;
case "6":
m = "jun"
break;
case "7":
m = "jul"
break;
case "8":
m = "aug"
break;
case "9":
m = "sep";
break;
case "10":
m = "oct"
break;
default:
break;
}
}
//custom date
function formatdate(t) {
var m;
switch(t.substring(0,2)) {
case "01":
m = "jan";
break;
case "02":
m = "feb"
break;
case "03":
m = "mar"
break;
case "04":
m = "apr"
break;
case "05":
m = "may";
break;
case "06":
m = "jun"
break;
case "07":
m = "jul"
break;
case "08":
m = "aug"
break;
case "09":
m = "sep";
break;
case "10":
m = "oct"
break;
case "11":
m = "nov"
break;
case "12":
m = "dec"
break;
default:
break;
}
return t.substring(2,4)+" "+m+" 20"+t.substring(4,6);
}
//uki search
window.dummymodel = uki.newclass(searchable, new function() {
this.init = function(data) {
this.items = data;
uki.each(this.items, function(i, row) {
row.searchindex = row[0].tolowercase();
})
};
this.matchrow = function(row, iterator) {
return row.searchindex.indexof(iterator.query) > -1;
};
});
//uki load
window.onlibraryload = function(data) {
alert('hi');
$("#docnumber").html("<strong>"+data.length+"</strong> loaded documents");
var model = new dummymodel(data),
lastquery = '',
table = uki('table');
model.bind('search.foundinchunk', function(chunk) {
table.data(table.data().concat(chunk)).layout();
});
table.find('header').bind('columnclick', function(e) {
var header = this;
if (e.column.sort() == 'asc') e.column.sort('desc');
else e.column.sort('asc');
header.redrawcolumn(e.columnindex);
uki.each(header.columns(), function(i, col) {
if (col != e.column && col.sort()) {
col.sort('');
header.redrawcolumn(i);
}
});
model.items = e.column.sortdata(model.items);
table.data(model.items);
})
table.data(model.items);
//jquery uki filter
$("#finddoc").bind("click keyup",function() {
if (this.value.tolowercase() == lastquery) return;
lastquery = this.value.tolowercase();
if (lastquery.match(/\s/)) {
hlt = lastquery;
table.data([]);
model.search(lastquery);
} else {
hlt = '';
table.data(model.items);
}
});
document.body.classname += '';
};
var script = document.createelement('script'),
head = document.getelementsbytagname('head')[0];
script.src = "http://localhost:8080/springapp/js/god.js";
head.insertbefore(script, head.firstchild);
</script>
</body>
</html>
now problem data gets loaded, portion inside head part not come up.
kindly me out here.
hi , perhaps should explicitly tell problem.
still @ wits end , not find solution till now. kindly help, plz.
have css file describes lay out . have jsp file renders json data , shows in web page. seeing new kind of problem. if project can divided 2 parts, first part 1st.jsp, shows buttons , tabs. 2nd.jsp shows json data . when combine code in both files, content of 2nd.jsp comes out. if scroll content, glimpse of content of 1st.jsp in background.
why happening kindly help.
Forum The Ubuntu Forum Community Ubuntu Specialised Support Development & Programming Programming Talk JSON data rendering blues
Ubuntu
Comments
Post a Comment