Win a copy of Practical SVG this week in the HTML/CSS/JavaScript forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic

Ajax innerHTML response showing Script tag

 
sadhu charan
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
 
Arun Giridhar
Ranch Hand
Posts: 181
  • 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.
 
Poop goes in a willow feeder. Wipe with this tiny ad:
the new thread boost feature brings a LOT of attention to your favorite threads
https://coderanch.com/t/674455/Thread-Boost-feature
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!