force rendering after dom modification

[Gamboz Matteo]

Hi all,

I'm writing a widget that should enable the user to choose some item
from a huge list that has a tree structure (~23000 items, node with max
children = ~1600 kids (only 3 levels in the tree...)).
The widget is basicalli a list, each element has two span tags that call
javascript functions on mouse click (one to choose the item and the
other to expand it) and eventually another list if the item is expanded.
When a user expand a node I use a XMLHttpRequest to retrive the node
children from the server without reloading the page.

Here is my problem: if I use the response to create all the pieces to
"draw" the list of children, the browser has to do a lot o processing
and it is too slow (~15 sec.) when a node has more than 400 children
(here I do something like
var xxx = document.createElemente("li");
var yyy = document.createElemente("span");
xxx.setAttribute(...);
yyy.appendChild(xxx);
ecc.).
Otherwise, if I prepare the list on the server (with all tags and
attributes in place) and just add the root node of the response to the
expanding node, then I don't get any rendering for this piece of added
html (no style, no mouse interaction), even if the source of the page
looks correct (here I do something like
var list = responseXML.getElementsByTagName("ul")[0];
currentNode.appendChild(list);
)

So my question is:
can I force the browser to re-render a page in some way, after I append
my new list?
or
any suggestions?
(if possible I'd like not to use window.open(...) even if it seems to
solve my problem :-) )
Thank you
Matteo

[Ian Collins]

Gamboz Matteo wrote:

Hi all,

Here is my problem: if I use the response to create all the pieces to
"draw" the list of children, the browser has to do a lot o processing
and it is too slow (~15 sec.) when a node has more than 400 children
(here I do something like
var xxx = document.createElemente("li");
var yyy = document.createElemente("span");
xxx.setAttribute(...);
yyy.appendChild(xxx);
ecc.).
Otherwise, if I prepare the list on the server (with all tags and
attributes in place) and just add the root node of the response to the
expanding node, then I don't get any rendering for this piece of added
html (no style, no mouse interaction), even if the source of the page
looks correct (here I do something like
var list = responseXML.getElementsByTagName("ul")[0];
currentNode.appendChild(list);
)

So my question is:
can I force the browser to re-render a page in some way, after I append
my new list?
or
any suggestions?

What you have may work in other browsers, but not in IE, where you can't
add received XML to the DOM. You might be able to use responseData (not
XML) and innerHtml, assuming you don't exceed any size limits.

The DOM is live, so any (visible) elements added will be displayed.

--
Ian Collins.

[Gamboz Matteo]

Ian Collins wrote:

Gamboz Matteo wrote: ....

expanding node, then I don't get any rendering for this piece of added
html (no style, no mouse interaction), even if the source of the page

What you have may work in other browsers, but not in IE, where you can't
add received XML to the DOM. You might be able to use responseData (not
XML) and innerHtml, assuming you don't exceed any size limits.

Thank you I'll try this way.

The DOM is live, so any (visible) elements added will be displayed.

Yes, sorry, I didn't mean that I can't see the elements; in fact I do
see the elements, but they are rendered as plain text.
In the source of the page I see the whole element (tab, attributes,
etc.), but in the browser window I see only the textContent of my nodes.
Maybe it is just that I can't put the received XML directly into the DOM
as you said. Could you point me to some documentation of this?

Thank you,
Matteo