Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #7991 > unrolled thread

Where to start looking (AJAX related)

Back to article view | Back to comp.lang.javascript

Contents

  Where to start looking (AJAX related) "Tom de Neef" <tdeneef@qolor.nl> - 2011-11-04 17:39 +0100
    Re: Where to start looking (AJAX related) "Tom de Neef" <tdeneef@qolor.nl> - 2011-11-04 19:47 +0100
    Re: Where to start looking (AJAX related) Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2011-11-04 21:09 +0100
      Re: Where to start looking (AJAX related) "Tom de Neef" <tdeneef@qolor.nl> - 2011-11-04 22:38 +0100

#7991 — Where to start looking (AJAX related)

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

[toc] | [next] | [standalone]

#7998

"Tom de Neef" <tdeneef@qolor.nl>
>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 

[toc] | [prev] | [next] | [standalone]

#8005

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.

Tom de Neef wrote:

> 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 "<div>"?

> 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
-- 
Danny Goodman's books are out of date and teach practices that are
positively harmful for cross-browser scripting.
 -- Richard Cornford, cljs, <cife6q$253$1$8300dec7@news.demon.co.uk> (2004)

[toc] | [prev] | [next] | [standalone]

#8015

"Thomas 'PointedEars' Lahn" <PointedEars@web.de>
> 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.

>> I have a problem with a server-generated page - sometimes the menu stops
>> responding
>
> 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.

>> 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?
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

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web