Best practices waiting for DOM parsing

[Joseph Lust]

I wanted to ask the community's opinion on the best practice for waiting for a DOM resource to become available.

Use Case:

You make an elaborate component via UiBinder or injecting some HTML/SVG into the DOM and upon executing the following statement trying to access an element that was injected, the DOM does not see it (i.e. inject 2MB of SVG) due to DOM parsing lag.

Work Arounds:

1. Schedule recurring timer to check if the element is available and then continue the program flow (now that the element's accessible in the DOM).
2. OR Schedule a deferred timer and then continue (less robust, does not always work).

So, curious what other folks have been using in this case where the GWT code must wait to wait for DOM parsing lag time. It seems to me like this is something there should be an official GWT function for doing as other frameworks do have functions to wait until an object becomes available in the DOM.

Sincerely,

Joseph

[Chris Price]

I was under the impression that all DOM manipulation calls are
synchronous, are you sure it's not GWT using the Scheduler under the
hood to run some of your code asynchronously? Can you give some
example code?

> --
> You received this message because you are subscribed to the Google Groups
> "Google Web Toolkit" group.
> To view this discussion on the web visit
> https://groups.google.com/d/msg/google-web-toolkit/-/JpBdhNvNWbIJ.
> To post to this group, send email to google-we...@googlegroups.com.
> To unsubscribe from this group, send email to
> google-web-tool...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/google-web-toolkit?hl=en.

[Alfredo Quiroga-Villamil]

Hi Joseph:

Not as familiar with SVG as I am with Canvas, but I am thinking that
you can likely (assuming I interpreted the documentation correctly)
hook into the SVG load event. Do investigate this, as I am not sure,
but below are a couple of sources. Take a look at SVGLoad, perhaps you
can use something like that instead of you doing the checking,
leverage if it's valid the callback that's native there.

http://www.w3.org/TR/SVG/interact.html

Then something like:

http://stackoverflow.com/questions/3883257/loading-svg-into-svgweb-dynamically-with-jquery

svg.addEventListener('SVGLoad', function() {
svg = this; // this will correctly refer to your SVG root
alert('loaded!');
}, false);
// also supported:
svg.onsvgload = function() {
alert('loaded!');
}

Best regards,

Alfredo

> --
> You received this message because you are subscribed to the Google Groups
> "Google Web Toolkit" group.
> To view this discussion on the web visit
> https://groups.google.com/d/msg/google-web-toolkit/-/JpBdhNvNWbIJ.
> To post to this group, send email to google-we...@googlegroups.com.
> To unsubscribe from this group, send email to
> google-web-tool...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/google-web-toolkit?hl=en.

--
Alfredo Quiroga-Villamil

AOL/Yahoo/Gmail/MSN IM: lawwton

[Joseph Lust]

@Chris Price

Thanks, I'll try to put together a simple demo. The only trouble is that this only happens on quite complex UI's, but I'll try to distill it down to it's essence.

@Alfredo

The issue I found with SVG is that these events are not well supported. For example, in Mozilla, SVG.getElementById is not supported. Why? On the bug report response they said that they hadn't bothered to implement the whole SVG spec since Canvas is the cat's meow. In the Lib-GWT-SVG library which we use, there is no support for events on SVG elements. I see that the spec you sent is barely a year old. I'll need to check if that is more supported than it was last year when I was trying.

Another example is that SVG animation (SMIL) which is awesome, does not work very well at all in Chrome while it rocks in Mozilla. It is really quite a shame since such declarative animation frameworks make awesome animations easy, but browser vendors cannot be bothered to implement long standing specs.

Ideally I'd just use addLoadHandler from http://www.w3.org/TR/SVG/script.html#EventAttributes, but it's not in the aforementioned SVG lib. I'll have to try doing it myself and see how it goes.

Sincerely,

Joseph