Experts Round Table Network - Scripting Remote Images in JavaScript

Quote from: sathyar

Hi Rod,

I refered the below mentioned article, it helps me lot. But atlast i am not able to solve my issue.

http://www.expertsrt.com/articles/Rod/imageAjaxNot.php

I developed a dashboard which contain multiple placeholder, some of them contain images and other placeholders have tables structure data's.

For server side i am using servlets.

One main servlet will dispatch request to other servlet and atlast the main servlet will return html page.

What i want to do is, for refreshing the placeholder i have to use AJAX.

So in servlet if any request is like ajax=true then i set contenttype = text/xml and i return xml type data

for ex : <path><![CDATA[/CygNet_Html/AlarmGraph.jpg]]></path>

On the body part of the html i am calling the function getProfile

for ex: <body onload=\"getProfile()\">

below is the javascript and sample html which i used.

PROBLEM IS, ITS REFRESHING, I AM GETTING ALERTS AND IMAGES ALSO CREATED WHEN JAVASCRIPT CALLING SERVLET. BUT IN THE PLACEHOLDER THE SHOWING THE SAME, ITS NOT SHOWING THE NEW ONE.

Aim is , it is a graph image, if some values are decrease and increase we will show it in the image. the image will create on the same name

My JavaScript code is

var httpRequest;
var SlideShowSpeed = 60000;

function getProfile()
{
var url = "/servlets/CygNet.Html.Alarms.DashBoardGraphNetworkElementsDown?dashboard=true&ajax=true";
alert (url);
if (window.ActiveXObject)
{
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest)
{
httpRequest = new XMLHttpRequest();
}

httpRequest.open("GET", url, true);
httpRequest.onreadystatechange = function() {processRequest(); } ;
httpRequest.send(null);
}

function processRequest()
{
if (httpRequest.readyState == 4)
{
if(httpRequest.status == 200)
{
var profileXML = httpRequest.responseXML.getElementsByTagName("path")[0];
alert(profileXML);
alert("<img src='"+profileXML.childNodes[0].nodeValue+"'>");
alert (document.all);
alert(document.getElementById);
alert(profileXML.childNodes[0].nodeValue);
var pImageURL = profileXML.childNodes[0].nodeValue;

/*var img=new Image();
img.src=pImageURL;
document.getElementById('imgAjax').src=img.src;*/
/*var img = document.createElement('img');
img.onload = function (evt) {
document.getElementById('imgAjax').src=this.src;
document.getElementById('imgAjax').width=this.width;
document.getElementById('imgAjax').height=this.height;
}
img.src = pImageURL;*/

var img=new Image();
img.src=pImageURL;
document.getElementById('imgDiv').innerHTML="<img border=0 src='"+pImageURL+"'>";

//document.getElementById("imgDiv").innerHTML="<img src='"+profileXML.childNodes[0].nodeValue+"'>";
//if (document.all||document.getElementById){
tss=setTimeout('getProfile()', SlideShowSpeed);
//}

//updateHTML(profileXML);
}
else
{
alert("Error loading page\n"+ httpRequest.status +":"+ httpRequest.statusText);
}
}
}

//////////////HTML SAMPLE.

<div id="wrapper1"><div
id="dragableElementsParentBox">
<div class="panel"
dragableBox="true" id="panel2"><
div class="headingbg"><div class=
"heading">Alarm Graph - Severity Basis</div></div><div class= "img" id="imgDiv"> <img id="imgAjax" src="/CygNet_Html/AlarmGraph.jpg">
</div
></div>

kindly help me in this regard.

thanks & regards,

sathya.r