Where to start looking (AJAX related)

T

Tom de Neef

I have a problem with a server-generated page - sometimes the menu stops
responding. By removing items I have isolated the problem. For the
simplified situation I have found a work-around but I do not understand why
the work-around is different from the original.

The html contains a table:
<table><tr><td id="MENU_1">menu</table>

In the body.onload the following code is called:
document.getElementById("MENU_1").style.cursor = "pointer"

This is my way to test - does the cursor change to a handpointer when moving
over the table cell. It does.
Until a processAjaxEvent call is processed that affects some aspect of a
<div> (visibility, color, position, etc).
Thereafter the cursor will no longer change into a handpointer when moving
over the table cell. (And in the real app also the cell's events are lost.)

Now the workaround. That is to scrap the javascript code in the onload
handler but add the style information directly to the html:
<table><tr><td id="MENU_1" style="cursor:pointer">menu</table>

The cursor is no longer affected by the Ajax call; it does change as
intended.
So my question is: what is the fundamental difference between setting an
attribute in the html source or via a javascript call?
Is the described behaviour understandable without diving into the Ajax code?
If so, can you explain that to me.

Thank you,
Tom
 
T

Tom de Neef

Tom de Neef said:
I have a problem with a server-generated page - sometimes the menu stops
responding.

Forgot to say: the problem exist in FF7.0.1 and Chrome 15.0 but not in IE8
Tom
 
T

Thomas 'PointedEars' Lahn

Your Subject header field value is suboptimal. It should *describe* the
problem you are having/the content of the posting succinctly, not forestall
the question.
I have a problem with a server-generated page - sometimes the menu stops
responding

Which means?
By removing items I have isolated the problem. For the simplified
situation I have found a work-around but I do not understand
why the work-around is different from the original.

The html contains a table:
<table><tr><td id="MENU_1">menu</table>

In the body.onload the following code is called:
document.getElementById("MENU_1").style.cursor = "pointer"

What do you mean by that?
This is my way to test - does the cursor change to a handpointer when
moving over the table cell. It does.
Until a processAjaxEvent call is processed that affects some aspect of a
<div> (visibility, color, position, etc).

What said:
Thereafter the cursor will no longer change into a handpointer when moving
over the table cell. (And in the real app also the cell's events are
lost.)

So, what is the value of the `cursor' property then? And what does this
have to do with your real problem, the "not responding" menu?
Now the workaround. That is to scrap the javascript code in the onload
handler but add the style information directly to the html:

There is no "javascript".
<table><tr><td id="MENU_1" style="cursor:pointer">menu</table>

The cursor is no longer affected by the Ajax call; it does change as
intended.

There is no "Ajax call".
So my question is: what is the fundamental difference between setting an
attribute in the html source or via a javascript call?

Assigning to a property of the object referred to by the `style' property of
a HTML DOM element object should be equivalent to declaring a CSS property
in the `style' attribute of the element that is represented by the element
object, with the the assigned value.

The problem must be elsewhere.

The code on top also is no call in the end, but a property assignment.
Is the described behaviour understandable without diving into the Ajax
code?
No.

If so, can you explain that to me.

That is not a question.


PointedEars
 
T

Tom de Neef

Thomas 'PointedEars' Lahn said:
Your Subject header field value is suboptimal. It should *describe* the
problem you are having/the content of the posting succinctly, not
forestall
the question.

I will improve over time. Promise.
Which means?
The menu consists of <td> elements in a <table>. The intention is that they
respond to mouseovers by showing the menu items which can then respond to a
click.
Sometimes the mouseover respons does not happen, the menu is 'dead' so to
say.

I have published a test page at http://84.86.145.75:8080

The server adds a load of crap, but the page is trivial. The key elements
are:
<script
type="text/javascript>IWBUTTON1IWCL.HookEvent("click",IWBUTTON1_onclick);function
IWBUTTON1_onclick(event) {
processAjaxEvent(event, IWBUTTON1IWCL,"IWBUTTON1.DoOnAsyncClick",false,
null, true);
return true;
}
function Initialize() { document.getElementById("MENU_1").style.cursor =
"pointer";}</script><body onload="Initialize()"><div class="MENUREGIONCSS"
id="MENUREGION" name="MENUREGION"> <div class="MENUHTMLAREACSS"
id="MENUHTMLAREA"> <table id="mainMenu"> <tr> <td
id="MENU_1">Menu 1</td> <td id="MENU_2" style="cursor:pointer">Menu
2</td> </tr> </table> </div></div>Plus another <div> and a button.
The button's onclick will asynchronously do something with this div. In the
example the server will change its position but likewise I could change
color or visibility, with the same effect. That effect is that the cursor of
MENU_1 is no longer "pointer" (it seems to be defaulted).
I have added a second <td> in the menu table where the cursor property of
the style attribute is set in the html.
So, what is the value of the `cursor' property then? And what does this
have to do with your real problem, the "not responding" menu?
The cursor is just a way of showing that the menu <td> looses attributes. In
the real world it also 'looses' associations with event handlers.
Assigning to a property of the object referred to by the `style' property
of
a HTML DOM element object should be equivalent to declaring a CSS property
in the `style' attribute of the element that is represented by the element
object, with the the assigned value.

The problem must be elsewhere.
You are very definitive with that statement. And I appreciate that the
source I can publish is not as clean as I would like it to be, because I
have no control over the items added by the server. Still, the page at above
URL is trivial as far as comparing the two <td> elements in the menu
<table>. It is also clear - at least in my FF and Chrome browsers - that
they respond differently to a mouse move after the button has been clicked.
And the button has nothing to do with the table elements. The behavious does
not change when I interchange the <td>'s or add others. After clicking the
button, FF no longer shows "element.style { cursor:pointer}" for the <td>
with id="MENU_1", which it does before clicking the button and it does show
it for the other <td> before and after clicking.
So, what is different between these two <td> style attributes? According to
your statement above, their behaviour should be equivalent.
If I have some idea of that, I may be able to find a decent solution for the
more pressing problem that similar behaviour affects the mouseover handlers.
Tom
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top