Forum:

HTML Pages with CSS and JavaScript

Problem in simulating progress bar using Ajax

Ranch Hand

Posts: 231

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hello friends ,

I was just trying out an AJAX based program, in which i simulate progress bar...by using a method similar to polling. It works fine, in Firefox or Google Chrome browser, but IE 7 gives "Stack overflow at line:0" alert message after first request is made.

Things i am using :-
jdk 1.6
Tomcat 5.5
IE 7
Firefox 3.0.4
Windows Vista
Eclipse 3.1

and this is what i briefly do:-

1) i make the first request to server through ajax by clicking a button.
2) on Server when request is received ... server increments a counter and sends back that value to client
3) before sending back the counter i make the thread to sleep for few seconds in my servlet....so that i can simulate or get the feel of delay as we see in progress bar
4) i get the counter value in response xml
5) according to the counter i calculate a value and paint a div present in the page with its width set to the calulated value
6) then again the javascript sends another request
7) the cycle continues....until the entire Div gets painted

The servlet code :-
--------------------------------------------------------

/**
 * @author raul (omkar)
 * 
 */
package org.omkar.ajax.test.servlet;
 
import java.io.IOException;
import java.io.PrintWriter;
 
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
/**
 * @author raul
 * 
 */
public class FileTransferSimulationServlet extends HttpServlet {
 
private int counter = 0;
 
/*
 * (non-Javadoc)
 * 
 * @see javax.servlet.http.HttpServlet#doGet(javax.servlet.http.HttpServletRequest,
 *      javax.servlet.http.HttpServletResponse)
 */
@Override
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
// super.doGet(arg0, arg1);
doPost(request, response);
}
 
/*
 * (non-Javadoc)
 * 
 * @see javax.servlet.http.HttpServlet#doPost(javax.servlet.http.HttpServletRequest,
 *      javax.servlet.http.HttpServletResponse)
 */
@Override
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
// super.doPost(arg0, arg1);
if( this.counter <= 10) {
this.counter++;
} else {
this.counter = 0;
}

response.setContentType("text/xml");
setResponseHeaders(response);

PrintWriter writer = response.getWriter();
writer.println("<?xml version='1.0' encoding='ISO-8859-1'?>");
writer.println("<root>");
writer.println("<amountTransfered>");
System.out.println(this.counter);
writer.println(this.counter);
writer.println("</amountTransfered>");
writer.println("</root>");
try {
Thread.sleep(2000);
} catch (InterruptedException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
writer.flush();
writer.close();
}
 
private void setResponseHeaders(HttpServletResponse response) {
response.setHeader( "Pragma", "no-cache" );
    response.setHeader( "Cache-Control", "no-cache" );
    response.setDateHeader( "Expires", 0 );
}
}

--------------------------------------------------------

and the servlet mapping in web.xml is :-
--------------------------------------------------------

--------------------------------------------------------

and the .... html file is :-

--------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>SAT - Simple Ajax Test</title>
 
<script language="javascript">
/* 
 * StateDescription
0The request is not initialized
1The request has been set up
2The request has been sent
3The request is in process
4The request is complete
 */
var xmlHttpObj = null;
var counter = 0;
var progressBarWidth = 0;

function initializeXMLHttpObject() {
xmlHttpObj = null;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttpObj=new XMLHttpRequest();
  
  } catch (e) {
  
  // Internet Explorer
  try {
  
xmlHttpObj=new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {
  
try {

xmlHttpObj=new ActiveXObject("Microsoft.XMLHTTP");

} catch (e) {
  alert("Your browser does not support AJAX!");
  return false;
}
  }
  }
}

function updateDivWithData(elementId, textData) {
var currentData = "";//document.getElementById(elementId).innerHTML;
currentData = currentData + textData;
document.getElementById(elementId).innerHTML = currentData;
}

function makeRequestToServer() {
initializeXMLHttpObject();

var url = "getFileProgress.jom";
var dataTransferMethod = "GET";

xmlHttpObj.onreadystatechange = updatePage;
xmlHttpObj.open(dataTransferMethod, url, true);
xmlHttpObj.send(null);
}

function ajaxCall(btn) {
btn.disabled = true;
makeRequestToServer();
}

function updatePage() {
if (xmlHttpObj.readyState == 4 && xmlHttpObj.status == 200) {

//xmlHttpObj.abort();
if (progressBarWidth != 100 ) {

var xmlDoc = xmlHttpObj.responseXML.documentElement;
var xmlValue = xmlDoc.getElementsByTagName("amountTransfered")[0].childNodes[0].nodeValue;
//alert(xml);

if (xmlValue != 0) {
var percentageCompleted = parseInt(xmlValue);
percentageCompleted = percentageCompleted * 10;

var table = document.getElementById("progressMeter");
var tableWidthInPixel = table.style.width;
tableWidthInPixel = tableWidthInPixel.substring(0, tableWidthInPixel.indexOf("px"));
tableWidthInPixel = parseInt(tableWidthInPixel);

progressBarWidth = tableWidthInPixel * (percentageCompleted / 100);
var progressBarDiv = document.getElementById("progressBar");

progressBarDiv.style.width = progressBarWidth+"%";
progressBarWidth = 0;
makeRequestToServer();
} else {
alert("Sorry !!! counter has been reset by the server !!!");
}

}

}
}
</script>
 
</head>
<body>
 
<p>
<p>
<p>
<center>
<form id="SATForm">

</td>
</tr>
</table>
<br>
<br>
</form>

</center>
</p>
</p>
</p>
</body>

</html>

--------------------------------------------------------

PLEASE HELP ME! ... what is wrong in the code...as it is not working in IE 7 ? Million thanks in advance

Thanks and Regards
Omkar Patkar (SCJP 1.4)[url]http://javacollectionsnotes.blogspot.com[/url] | [url]http://omkar-myscjpexp.blogspot.com[/url]

omkar patkar

Ranch Hand

Posts: 231

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Please can some one help me out ???

Thanks and Regards
Omkar Patkar (SCJP 1.4)[url]http://javacollectionsnotes.blogspot.com[/url] | [url]http://omkar-myscjpexp.blogspot.com[/url]

Ulf Dittmer

Rancher

Posts: 43028

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

PatienceIsAVirtue. It's the weekend; do you really expect answers within 86 minutes?

Eric Pascarello

author

Posts: 15385

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Have you debugged what is the world is happening?
Is the request making to the server? Is it cached?

Eric

omkar patkar

Ranch Hand

Posts: 231

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hello Friends,

I am sorry i was a bit impatient. The problem is fixed now! ... i don't know how ...but here is the story.

While i was waiting for some solution on ranch ...i went through following links which talk about "Stack overflow" problem of internet explorer.

http://www.eggheadcafe.com/software/aspnet/29732115/ie7-stack-overflow.aspx

http://answers.yahoo.com/question/index?qid=20070702025645AAs7P7Z

http://www.webdeveloper.com/forum/archive/index.php/t-33308.html

http://bytes.com/groups/javascript/622869-stack-overflow-ie-not-mozilla

... so i played with the settings or configuration of IE... i did not find any option like "Disable third party plugins" ... But i did find, options like:-
"Disable script debugging(Internet Explorer)" [...this was already ticked]
"Disable script debugging(Other)" [... this option was also ticked]
"Display notification for every script error [... and even this option was ticked]

so i unticked the 1st 2 options. In the meantime while i was searching the internet for some possible, i was also modifying the Ajax code, and considerable changes had been made by then.

TO MY SURPRISE.... the code worked !!! in all the three browsers :-
IE 7
Firefox 3.0.4
Google Chrome

.... i reverted back the settings of the browser to default and tried undoing the changes i made to the code as far as possible to reproduce the problem .....but to my surprise the error is not reproducible and still it is working in all the three browsers.

i really don't know what was the ACTUAL problem...and how it got solved.

Shall i post the latest AJAX code ... can someone please guide, what could have possibly went wrong ?

Million thanks!

Thanks and Regards
Omkar Patkar (SCJP 1.4)[url]http://javacollectionsnotes.blogspot.com[/url] | [url]http://omkar-myscjpexp.blogspot.com[/url]