Javascript looses mind on resize event

Howard · Dec 15, 2006

I am having a problem that is driving me crazy and I am whits end. I am
hoping that someone here can help me. I have a client server application
where the client is drawing a progressive bar graph based on data
retrieved from the server once a second. The basic loop looks like this;

</HEAD>
<script language="JavaScript1.2">

var nodedatareq;
function buildGraphs() {

document.writeln("<BODY>");

// build graphs and add them

document.writeln("</BODY>");

window.addEventListener("resize",resizeEventHandler, false);
}

function initXMLHTTPRequest() {
var xreq= null
if( window.XMLHttpRequest ) {
xreq= new XMLHttpRequest()
} else if(window.ActiveXObject) {
xreq= new ActiveXObject("Microsoft.XMLHTTP")
}
return xreq
}

function sendNodeRequest()
{
var mnodedataod="POST";
nodedatareq = initXMLHTTPRequest();
if( nodedatareq ) {
nodedataParam = "nodedata="+ escape(1)
nodedatareq.onreadystatechange=nodedataHandler
nodedatareq.open(mnodedataod,serverURL,true)
nodedatareq.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded")
nodedatareq.send(nodedataParam)
}
}

function nodedataHandler() {

var ready= nodedatareq.readyState
var respStr=null
var index
if( ready == READY_STATE_COMPLETE ) {
respStr=nodedatareq.responseText

// plot data

timer = setTimeout(sendNodeRequest, 1000)
}
}
function resizeEventHandler(target, e)
{
// do nothing
}

buidGraphs()
timer = setTimeout(sendNodeRequest, 1000)
</script>

This works fine advancing the graphs and looping until I resize the
window. Once I do that the first time it reenters sendNodeRequest() I
get an error that initXMLHTTPRequest is undefined. I tried inlining the
code for initXMLHTTPRequest into sendNodeRequest but then it complains
thay nodedatareq is undefined. It is as if it has completely lost all of
its history and has no context or scope.

I have tried using

window.onresize = function(e) {resizeEventHandler(e);};

instead of window.addEventListener. I tried

window.onresize = function(e) {resizing = 1;};

so it didn't have to call a function, but that had the same results.

I also tried putting the call to window.addEventListener before the call
to buildGraphs. Then it didn't die but the event was not seviced either.

Anyone have any suggestions?

Thanks

Howard

pcx99 · Dec 16, 2006

Howard wrote:

If you don't return false in your event handlers, the browsers will
quite cheerfully continue in their default behavior, the kind which is
driving you crazy. Once you start returning false they will do what you
ask and no more.

window.onresize = function(e) {resizeEventHandler(e);};

instead of window.addEventListener. I tried

window.onresize = function(e) {resizing = 1;};

so it didn't have to call a function, but that had the same results.

Richard Cornford · Dec 16, 2006

Howard said:
I am having a problem that is driving me crazy and I am
whits end. I am hoping that someone here can help me. I
have a client server application where the client is
drawing a progressive bar graph based on data retrieved
from the server once a second. The basic loop looks
like this;

</HEAD>
<script language="JavaScript1.2">

^^^
This is silly in a script that requires the use of an XML HTTP request
object. You certainly do not want browsers that support the aberrant
type-conversion and alternative syntax of JavaScript 1.2 to actually
employ that language version.

var nodedatareq;
function buildGraphs() {

document.writeln("<BODY>");

// build graphs and add them

document.writeln("</BODY>");

window.addEventListener("resize",resizeEventHandler, false);
}

This works fine advancing the graphs and looping until I
resize the window. Once I do that the first time it reenters
sendNodeRequest() I get an error that initXMLHTTPRequest is
undefined. I tried inlining the code for initXMLHTTPRequest
into sendNodeRequest but then it complains thay nodedatareq
is undefined. It is as if it has completely lost all of its
history and has no context or scope.

<snip>

That is precisely what has happened. If you use -document.write - or
document.writeln - after the original document has loaded you are
re-opening the document, removing all of its existing contents, and
associated script functions and variables, and replacing the document
from scratch. You may not be calling either of the - write - methods
after the first loading of the document (though you also may as the
request is asynchronous and the time for the response to start will be
influenced by many factors, including network traffic), but as soon as
you re-size handler re-calls the method that does the wiring the current
document, and associated scripts, are removed and replaced.

Richard.

Lee · Dec 16, 2006

Howard said:

I am having a problem that is driving me crazy and I am whits end.

You're at the end of the smallest part imaginable because
Javscript seems to be allowing it's mind to run loose?

--

Howard · Dec 18, 2006

Thank you for your response

Richard said:
Howard wrote:

^^^
This is silly in a script that requires the use of an XML HTTP request
object. You certainly do not want browsers that support the aberrant
type-conversion and alternative syntax of JavaScript 1.2 to actually
employ that language version.

So, I am better off just using <script> or some other version

but as soon as
you re-size handler re-calls the method that does the wiring the current
document, and associated scripts, are removed and replaced.

I am not sure what you are saying here (a function of my lack of
knowledge I am sure). Is the location of my setting the callback the
problem or is the act of having a callback on the window object the
problem? I have tried moving the setting of the callback to other
locations in the script outside the <body>...</body> section. If I move
the setting to before it, the callback never gets called. If I move it
after I get the same undefined. If setting the callback on the window
object is the problem, where is a better place to put it?

Thanks again

Howard

Lee · Dec 18, 2006

Howard said:

Thank you for your response

So, I am better off just using <script> or some other version

I am not sure what you are saying here (a function of my lack of
knowledge I am sure). Is the location of my setting the callback the
problem or is the act of having a callback on the window object the
problem?

Your script tag should be:
<script type="text/javascript">

The problem is that you use document.write after the page has loaded.
The first thing document.write() does is to clear the page memory.
You need to choose another method of updating the page, such as
changing the innerHTML property of some component.

--

Howard · Dec 19, 2006

Got it, and fixed it. Thanks

Howard

Howard said:

Your script tag should be:
<script type="text/javascript">

The problem is that you use document.write after the page has loaded.
The first thing document.write() does is to clear the page memory.
You need to choose another method of updating the page, such as
changing the innerHTML property of some component.

Javascript not hiding nested elements simultaneously	2	Apr 5, 2023
How can I guarantee that the all callback functions of the first Ajax API call have finished executing before initiating the 2 call in JavaScript?	2	Oct 30, 2023
Global Variable staying undefined with Ajax Response	2	Mar 19, 2022
Uncaught TypeError using hammer.js	0	Oct 28, 2021
David Mark's Essential Javascript Tips - Volume #8 - Tip #47E -Attaching and Detaching Event Listene	1	Dec 15, 2011
Resize an existing popup window	0	Jun 24, 2005
unload event more restrictive now on Safari 3.1 ?	11	Jun 16, 2008
Newbie - Resize Browser Window on Page Load	4	Nov 28, 2005

Javascript looses mind on resize event

Howard

pcx99

Richard Cornford

Lee

Howard

Lee

Howard

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads