Dynamic content has loaded

[Andrew Poulos]

Using DOM methods and/or innerHTML to make some significant changes to a
page how can I test that the changes have completed/loaded? Similar to
how a window triggers an onload event.

I need to run some javascript on the changed content but the changes
need to have been completed/loaded beforehand.

Andrew Poulos

 

[David Mark]

Using DOM methods and/or innerHTML to make some significant changes to a
page how can I test that the changes have completed/loaded? Similar to
how a window triggers an onload event.

Depends on what you mean by completed/loaded? All of the images and/
or other assets have loaded completely?

I need to run some javascript on the changed content but the changes
need to have been completed/loaded beforehand.

Assuming you mean what I think, I have to ask why you need to do that.

 

[Andrew Poulos]

Depends on what you mean by completed/loaded? All of the images and/
or other assets have loaded completely?

Loaded enough so that if I dynamically change, say, a CSS property for
an element I won't get an error.

Assuming you mean what I think, I have to ask why you need to do that.

I'm working on an "assessment" where the question data is to be read
from separate XML files. One XML file per question. Questions are mainly
text but may contain one or more images or a SWF file.

Depending on the type of question I'll need to run a javascript function
to initialise it. That is, I'm intending the procedure to be:
- user action to trigger the next question
- read the XML file
- build the question in the HTML
- run some javascript


BTW is there a way to get Safari to read an XML file off the local file
system? I'd like to be able to test locally before I upload.

Andrew Poulos

 

[David Mark]

Loaded enough so that if I dynamically change, say, a CSS property for
an element I won't get an error.

Under what circumstances would you get an error by changing a CSS
property (assuming it is valid) and how do those tie to innerHTML or
other DOM mutations?

I'm working on an "assessment" where the question data is to be read
from separate XML files. One XML file per question. Questions are mainly
text but may contain one or more images or a SWF file.

Depending on the type of question I'll need to run a javascript function
to initialise it. That is, I'm intending the procedure to be:
- user action to trigger the next question
- read the XML file
- build the question in the HTML
- run some javascript

Well, I assume everything after the user action is JS. The XML file
is a red herring. I don't see what the problem is with building the
HTML. You can style it before or after you append it to the DOM. You
can even do it at the same time with innerHTML and inline styles.

BTW is there a way to get Safari to read an XML file off the local file
system? I'd like to be able to test locally before I upload.

XHR I'm sure. You'll almost certainly have to relax the security
settings for local files. In FF it's buried in that ridiculous
about:config hodgepodge (only slightly more intuitive than RegEdit and
much harder to find.)

 

[Andrew Poulos]

Under what circumstances would you get an error by changing a CSS
property (assuming it is valid) and how do those tie to innerHTML or
other DOM mutations?

If I do a innerHTML and then straight away try to reference an element
(I know should exist) by using getElementById won't that error if the
element doesn't actually exist yet? So trying to change a CSS property thus
var el = document.getElementById("elem");
el.style.color = "#000000";
will error.

Well, I assume everything after the user action is JS. The XML file
is a red herring. I don't see what the problem is with building the
HTML. You can style it before or after you append it to the DOM. You
can even do it at the same time with innerHTML and inline styles.

If its question type of, say, A then I know it will have X elements but
as many of them I reference by ID I need to know when they exist.

XHR I'm sure. You'll almost certainly have to relax the security
settings for local files. In FF it's buried in that ridiculous
about:config hodgepodge (only slightly more intuitive than RegEdit and
much harder to find.)

Thanks

Andrew Poulos

 

[David Mark]

If I do a innerHTML and then straight away try to reference an element
(I know should exist) by using getElementById won't that error if the
element doesn't actually exist yet?

It will exist. But if you are concerned, use standard DOM methods
instead.

So trying to change a CSS property thus
var el = document.getElementById("elem");

if (el) {

el.style.color = "#000000";

} else {
throw new Error('Something bad happened.');
}

Remove the throw when you are done with the development (and I don't
think you'll hear from it during.)

will error.





If its question type of, say, A then I know it will have X elements but
as many of them I reference by ID I need to know when they exist.

They exist when you create them.

[snip]