• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Liutauras Vilda
  • Jeanne Boyarsky
  • Devaka Cooray
  • Paul Clapham
Sheriffs:
  • Tim Cooke
  • Knute Snortum
  • Bear Bibeault
Saloon Keepers:
  • Ron McLeod
  • Tim Moores
  • Stephan van Hulst
  • Piet Souris
  • Ganesh Patekar
Bartenders:
  • Frits Walraven
  • Carey Brown
  • Tim Holloway

Ajax innerHTML response showing Script tag

 
Greenhorn
Posts: 18
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator


Good morning everybody

I have "FinalChart.jsp" page which display barchart based on value, it is showing correct if i executed this page alone, But depending on my requirement i have to executed it by Ajax call , but when i send a ajax call nothing will display , so i check in alert it is only showing scripting tag, How can i display graph through ajax call ?

Here my FinalChart.jsp code


<!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>Flot Bar Chart</title>

<style type="text/css">
body { font-family: Verdana, Arial, sans-serif; font-size: 12px; }
h1 { width: 450px; margin: 0 auto; font-size: 12px; text-align: center; }
#placeholder { width: 650px; height: 200px; position: relative; margin: 0 auto; }
.legend table, .legend > div { height: 82px !important; opacity: 1 !important; right: -55px; top: 10px; width: 116px !important; }
.legend table { border: 1px solid #555; padding: 5px; }
#flot-tooltip { font-size: 12px; font-family: Verdana, Arial, sans-serif; position: absolute; display: none; border: 2px solid; padding: 2px; background-color: #FFF; opacity: 0.8; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; }
</style>

<script type="text/javascript" language="javascript" src="excanvas.min.js"></script>
<script type="text/javascript" language="javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" language="javascript" src="jquery.flot.js"></script>
<script type="text/javascript" language="javascript" src="jquery.flot.axislabels.js"></script>
<script type="text/javascript" language="javascript" src="jquery.flot.orderBars.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var d1_1 = [
[1325376000000, 120],
[1328054400000, 70],
[1330560000000, 100],
[1333238400000, 60],
[1335830400000, 35],
[1338422400000, 50],
[1341014400000, 35],
[1343606400000, 50],
[1346198400000, 30],
[1348790400000, 10],
[1351382400000, 100]

];

var d1_2 = [
[1325376000000, 80],
[1328054400000, 60],
[1330560000000, 30],
[1333238400000, 35],
[1335830400000, 30],
[1338422400000, 45],
[1341014400000, 35],
[1343606400000, 40],
[1346198400000, 40],
[1348790400000, 100],
[1351382400000, 100]

];

var d1_3 = [
[1325376000000, 80],
[1328054400000, 40],
[1330560000000, 30],
[1333238400000, 20],
[1335830400000, 10],
[1338422400000, 30],
[1341014400000, 35],
[1343606400000, 30],
[1346198400000, 50],
[1348790400000, 50],
[1351382400000, 100]

];

var d1_4 = [
[1325376000000, 15],
[1328054400000, 10],
[1330560000000, 15],
[1333238400000, 20],
[1335830400000, 15],
[1338422400000, 35],
[1341014400000, 35],
[1343606400000, 25],
[1346198400000, 20],
[1348790400000, 30],
[1351382400000, 100]
];
var d1_5 = [
[1325376000000, 15],
[1328054400000, 10],
[1330560000000, 15],
[1333238400000, 20],
[1335830400000, 15],
[1338422400000, 45],
[1341014400000, 35],
[1343606400000, 10],
[1346198400000, 30],
[1348790400000, 20],
[1351382400000, 100]

];

var data1 = [
{
label: "OAK",
data: d1_1,
bars: {
show: true,
barWidth: 12*24*60*60*300,
fill: true,
lineWidth: 1,
order: 1,
fillColor: "#AA4643"
},
color: "#AA4643"
},
{
label: "USN",
data: d1_2,
bars: {
show: true,
barWidth: 12*24*60*60*300,
fill: true,
lineWidth: 1,
order: 2,
fillColor: "#89A54E"
},
color: "#89A54E"
},
{
label: "OCN",
data: d1_3,
bars: {
show: true,
barWidth: 12*24*60*60*300,
fill: true,
lineWidth: 1,
order: 3,
fillColor: "#4572A7"
},
color: "#4572A7"
},
{
label: "QOK",
data: d1_4,
bars: {
show: true,
barWidth: 12*24*60*60*300,
fill: true,
lineWidth: 1,
order: 4,
fillColor: "#80699B"
},
color: "#80699B"
},
{
label: "GEN",
data: d1_5,
bars: {
show: true,
barWidth: 12*24*60*60*300,
fill: true,
lineWidth: 1,
order: 5,
fillColor: "#009900"
},
color: "#009900"
}


];

$.plot($("#placeholder"), data1, {
xaxis: {
min: (new Date(2011, 11, 8)).getTime(),
max: (new Date(2012, 11, 18)).getTime(),
mode: "time",
timeformat: "%b",
tickSize: [1, "month"],
monthNames: ["8:00 AM", "9:00 AM", "10:00 AM", "11:00 AM", "12:00 PM", "1:00 PM", "2:00 PM", "3:00 PM", "4:00 PM", "5:00 PM", "6:00 PM"," "],
tickLength: 0, // hide gridlines
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
axisLabelPadding: 5
},
yaxis: {
axisLabel: 'Value',
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
axisLabelPadding: 5
},
grid: {
hoverable: true,
clickable: false,
borderWidth: 1
},
legend: {
labelBoxBorderColor: "none",
position: "right"
},
series: {
shadowSize: 1
}
});

function showTooltip(x, y, contents, z) {
$('<div id="flot-tooltip">' + contents + '</div>').css({
top: y - 20,
left: x - 90,
'border-color': z,
}).appendTo("body").show();
}

function getMonthName(newTimestamp) {
var d = new Date(newTimestamp);

var numericMonth = d.getMonth();
var monthArray = ["8:00 AM", "9:00 AM", "10:00 AM", "11:00 AM", "12:00 PM", "1:00 PM", "2:00 PM", "3:00 PM", "4:00 PM", "5:00 PM", "6:00 PM"];

var alphaMonth = monthArray[numericMonth];

return alphaMonth;
}

$("#placeholder").bind("plothover", function (event, pos, item) {
if (item) {
if (previousPoint != item.datapoint) {
previousPoint = item.datapoint;
$("#flot-tooltip").remove();

var originalPoint;

if (item.datapoint[0] == item.series.data[0][3]) {
originalPoint = item.series.data[0][0];
} else if (item.datapoint[0] == item.series.data[1][3]){
originalPoint = item.series.data[1][0];
} else if (item.datapoint[0] == item.series.data[2][3]){
originalPoint = item.series.data[2][0];
} else if (item.datapoint[0] == item.series.data[3][3]){
originalPoint = item.series.data[3][0];
} else if (item.datapoint[0] == item.series.data[4][3]){
originalPoint = item.series.data[4][0];
}

var x = getMonthName(originalPoint);
y = item.datapoint[1];
z = item.series.color;

showTooltip(item.pageX+10, item.pageY+10,
"<b>" + item.series.label + "</b><br /> = " + y,
z);
}
} else {
$("#flot-tooltip").remove();
previousPoint = null;
}
});
});
</script>
</head>

<body>
<h1>Trigger Analysis Data</h1>
<div id="placeholder"></div>
</body>
</html>


and here my AJax Request jsp , i,e Test.jsp

<!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" lang="ro">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
<title>Ajax tutorial - http://coursesweb.net</title>;

<script type="text/javascript"><!--
function get_XmlHttp() {
var xmlHttp = null;

if(window.XMLHttpRequest) { // for Forefox, IE7+, Opera, Safari, ...
xmlHttp = new XMLHttpRequest();
}
else if(window.ActiveXObject) { // for Internet Explorer 5 or 6
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}

return xmlHttp;
}

function ajaxrequest(php_file, tagID) {
var request = get_XmlHttp();

var the_data = '';
request.open("POST", php_file, true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.send(the_data);
request.onreadystatechange = function() {
if (request.readyState == 4) {
var resp = request.responseText;
alert(resp);
// get the response from php
document.getElementById(tagID).innerHTML = resp; // add the response into the tag with the ID from "tagID"
parseScript(resp);
}
}
}

function parseScript(strcode) {
var scripts = new Array();
// Strip out tags
while(strcode.indexOf("<script") > -1 || strcode.indexOf("</script") > -1) {
var s = strcode.indexOf("<script");
var s_e = strcode.indexOf(">", s);
var e = strcode.indexOf("</script", s);
var e_e = strcode.indexOf(">", e);

// Add to scripts array
scripts.push(strcode.substring(s_e+1, e));
// Strip from strcode
strcode = strcode.substring(0, s) + strcode.substring(e_e+1);
}

// Loop through every script collected and eval it
for(var i=0; i<scripts.length; i++) {
try {
eval(scripts[i]);
}
catch(ex) {
// do what you want here when a script fails
}
}
}
--></script>
</head>
<body>

<div id="context"> </div>
<h4 style="cursor:pointer;" onclick="ajaxrequest('FinalChart.jsp', 'context')"><u>Test</u></h4>

</body>
</html>



Thanks in adavance

S C P
 
Ranch Hand
Posts: 188
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Please add code tag.

Your getting response as text later your injecting it through (innerHTML), so what you see is correct. Use cewolf in jsp or through Jquery highcharts , chartfx.
 
With a little knowledge, a cast iron skillet is non-stick and lasts a lifetime.
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!