Refer to dynamically generated objects during page load

[Sisilla]

Hello All,

I am using


[element].innerHTML=xmlHttp.responseText

to generate some multiple selection dropdowns. Before the page is
finished loading, I would like to manipulate the dropdowns by calling
some javascript functions. The trouble is that I cannot refer to the
dropdownobjects until after the page has loaded.

Is there any way to accomplish what I'm trying to do without
constructing the dropdowns with DOM document methods?

I greatly appreciate any and all efforts to help me. Thank you for
your time and consideration.

Sincerely,

Sisilla

 

[shimmyshack]

Hello All,

I am using

[element].innerHTML=xmlHttp.responseText

to generate some multiple selection dropdowns. Before the page is
finished loading, I would like to manipulate the dropdowns by calling
some javascript functions. The trouble is that I cannot refer to the
dropdownobjects until after the page has loaded.

Is there any way to accomplish what I'm trying to do without
constructing the dropdowns with DOM document methods?

I greatly appreciate any and all efforts to help me. Thank you for
your time and consideration.

Sincerely,

Sisilla

yeah you just manipulate their /properties/ and then print to page
wherever they should appear.

 

[Sisilla]

Hello All,

I am using

[element].innerHTML=xmlHttp.responseText

to generate some multiple selection dropdowns. Before the page is
finished loading, I would like to manipulate the dropdowns by calling
some javascript functions. The trouble is that I cannot refer to the
dropdownobjects until after the page has loaded.

Is there any way to accomplish what I'm trying to do without
constructing the dropdowns with DOM document methods?

I greatly appreciate any and all efforts to help me. Thank you for
your time and consideration.

Sisilla

I would refrain from doing any of this code until your page is loaded.
Asynchronous behavior during rendering will cause you problem in random
ways.
After you get the onLoad event, you can perform the innerHTML replacement.- Hide quoted text -

- Show quoted text -

Thank you for your reply. I want to run the script before the page
loads because the page executes a query on a database during load, and
the results are used as arguments to the script. Now, if there were
some way to pass these arguments after the page loads, my problem
would be solved. I appreciate any further advice. Thank you for your
time and consideration.

-Sisilla

 

[ASM]

En réponse à Sisilla qui écrivit, en date du : 8/09/07 14:55, le
message suivant :

Thank you for your reply. I want to run the script before the page
loads because the page executes a query on a database during load,

so this "query-script" is server-side code, no ?

and the results are used as arguments to the script.

this time it is the JS script, no ?

Now, if there were some way to pass these arguments

<script type="text/javascript">
<? myQueryToMeToMe(); ?>
var arg_1 = '<?= $arg_1 ?>';
var arg_2 = '<?= $arg_2 ?>';
</script>

after the page loads, my problem would be solved.
I appreciate any further advice. Thank you for your
time and consideration.

<script type="text/javascript">
window.onload = function() {
var s = document.createElement('script');
s.src = "<?= $file ?>";
document.body.appendChild(s);
}
</script>

 

[Sisilla]

En réponse à Sisilla qui écrivit, en date du : 8/09/07 14:55, le
message suivant :




so this "query-script" is server-side code, no ?


this time it is the JS script, no ?


<script type="text/javascript">
<? myQueryToMeToMe(); ?>
var arg_1 = '<?= $arg_1 ?>';
var arg_2 = '<?= $arg_2 ?>';
</script>


<script type="text/javascript">
window.onload = function() {
var s = document.createElement('script');
s.src = "<?= $file ?>";
document.body.appendChild(s);}

</script>

So there is no way to reference the elements created using innerHTML?
I must use DOM methods?

 

[Evertjan.]

Sisilla wrote on 08 sep 2007 in comp.lang.javascript:

So there is no way to reference the elements created using innerHTML?
I must use DOM methods?

<div id='testdiv'>.</div>

<script type='text/javascript'>

var t = document.getElementById('testdiv');

t.innerHTML = '<span id=x>Hello</span> world'

alert(document.getElementById('x').innerHTML)

</script>

IE7 tested.

 

[Sisilla]

En réponse à Sisilla qui écrivit, en date du : 8/09/07 14:55, le
message suivant :




so this "query-script" is server-side code, no ?


this time it is the JS script, no ?


<script type="text/javascript">
<? myQueryToMeToMe(); ?>
var arg_1 = '<?= $arg_1 ?>';
var arg_2 = '<?= $arg_2 ?>';
</script>


<script type="text/javascript">
window.onload = function() {
var s = document.createElement('script');
s.src = "<?= $file ?>";
document.body.appendChild(s);}

</script>

Is there any way to test if the innerHTML of an element has been
changed? It seems that my script is ALWAYS executed before it has been
changed, and so I get "Object Required" errors even if I execute my
script onLoad.

I really would like to accomplish all of this without creating DOM
elements! I appreciate any further advice.

 

[Thomas 'PointedEars' Lahn]

I am using

[element].innerHTML=xmlHttp.responseText

to generate some multiple selection dropdowns. Before the page is
finished loading, I would like to manipulate the dropdowns by calling
some javascript functions. The trouble is that I cannot refer to the
dropdownobjects until after the page has loaded.

Is there any way to accomplish what I'm trying to do without
constructing the dropdowns with DOM document methods?

xmlHttp.responseXML yields an (I)XML(DOM)Document object reference, given a
response served with an XML media type. You can manipulate that document
with DOM methods (you have to, or it would have to be PITA-string-parsing),
and assign the serialization of the document tree to `innerHTML'. That
said, I don't think you need `innerHTML' anymore then.

And if you think about it, if the responseText value is the result of a
database query as you state in [1], the server should generate the
appropriate response in the first place, without you having to script
anything client-side.


PointedEars
___________
[1] <[email protected]>

 

[Sisilla]

I am using

[element].innerHTML=xmlHttp.responseText

to generate some multiple selection dropdowns. Before the page is
finished loading, I would like to manipulate the dropdowns by calling
some javascript functions. The trouble is that I cannot refer to the
dropdownobjects until after the page has loaded.

Is there any way to accomplish what I'm trying to do without
constructing the dropdowns with DOM document methods?

xmlHttp.responseXML yields an (I)XML(DOM)Document object reference, given a
response served with an XML media type. You can manipulate that document
with DOM methods (you have to, or it would have to be PITA-string-parsing),
and assign the serialization of the document tree to `innerHTML'. That
said, I don't think you need `innerHTML' anymore then.

And if you think about it, if the responseText value is the result of a
database query as you state in [1], the server should generate the
appropriate response in the first place, without you having to script
anything client-side.

PointedEars
___________
[1] <[email protected]>
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <[email protected]>

FYI: Some multiple option select elements are getting their options
from the database, and based on another query, certain options will be
pre-selected. Is this scenario really that impossible to imagine?

Your reply has left me with an idea, however. I will try to execute
both queries before updating innerHTML, and try to assign "selected"
attributes to the appropriate options based on the second query. I'll
let you know how it turns out. Thanks.

 

[ASM]

En réponse à Sisilla qui écrivit, en date du : 8/09/07 17:21, le
message suivant :

On Sep 8, 10:52 am, ASM <[email protected]>
wrote:

something about a page where the php after querying a base food a JS script

So there is no way to reference the elements created using innerHTML?
I must use DOM methods?

Not before they exist.
(you can't addresse to them before they come.)

Then, innerHTML or createElement, is to your convenience.

The use of innerHTML can give some surprises
http://stephane.moriaux.perso.orange.fr/truc/innerHTML_danger
http://www.quirksmode.org/dom/innerhtml.html


<html>
<script type="text/javascript">
function chge(where, what) {
document.getElementById(where).innerHTML = what;
}
var t = '<div style="border:red solid;text-align:center">'+
'New <strong>content<\/strong>'+
'<\/div>';
</script>
<div id="here" style="border:black solid">
<p>Space where to change its content
</div>
<p><a href="#" onclick="chge('here',t);return false;">test</a>
</html>

 

[Thomas 'PointedEars' Lahn]

I am using
[element].innerHTML=xmlHttp.responseText
to generate some multiple selection dropdowns. Before the page is
finished loading, I would like to manipulate the dropdowns by calling
some javascript functions. The trouble is that I cannot refer to the
dropdownobjects until after the page has loaded.
Is there any way to accomplish what I'm trying to do without
constructing the dropdowns with DOM document methods?

xmlHttp.responseXML yields an (I)XML(DOM)Document object reference, given a
response served with an XML media type. You can manipulate that document
with DOM methods (you have to, or it would have to be PITA-string-parsing),
and assign the serialization of the document tree to `innerHTML'. That
said, I don't think you need `innerHTML' anymore then.

And if you think about it, if the responseText value is the result of a
database query as you state in [1], the server should generate the
appropriate response in the first place, without you having to script
anything client-side.
[...]

Please trim your quotes, and don't quote signatures unless you are referring
to them. TIA.

FYI: Some multiple option select elements are getting their options
from the database, and based on another query, certain options will be
pre-selected. Is this scenario really that impossible to imagine?

No, it is conceivable. I am doing that myself.

Your reply has left me with an idea, however. I will try to execute
both queries before updating innerHTML, and try to assign "selected"
attributes to the appropriate options based on the second query. I'll
let you know how it turns out. Thanks.

Good luck.

However, I am still not convinced that using `innerHTML' (which is a
proprietary property, BTW) is even necessary here. If you change the
content of the document when it is just loaded anyway, why could the
server not generate the proper markup (with all options properly
selected) in the first place?


PointedEars

 

[Thomas 'PointedEars' Lahn]

[...]
Your reply has left me with an idea, however. I will try to execute
both queries before updating innerHTML, and try to assign "selected"
attributes to the appropriate options based on the second query. I'll
let you know how it turns out. Thanks.

Good luck.

However, I am still not convinced that using `innerHTML' (which is a
proprietary property, BTW) is even necessary here. If you change the
content of the document when it is just loaded anyway, why could the
server not generate the proper markup (with all options properly
selected) in the first place?
[...]

Please trim your quotes.
http://www.jibbering.com/faq/faq_notes/clj_posts.html

[...]
So theoretically if listbox A has 4 selections, you may have four
different lists in lisbox B.

A "listbox" can only contain one list. And if "listbox" B is to be filled
right after the document was loaded, it can be "filled" (i.e. generated)
by the server like "listbox" A.

This is a common occurrence in RIA applications. It is perhaps possible
to do this via innerHTML replacement, however, the way I have done it is
via direct manipulation of the option arrays in the listboxes.

The `option' property of HTMLSelectElement objects refers to an
HTMLOptionsCollection object, not an Array object.

http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-94282980


PointedEars

 

[ASM]

En réponse à Thomas 'PointedEars' Lahn qui écrivit, en date du :
9/09/07 21:40, le message suivant :

intrader wrote:

A "listbox" can only contain one list. And if "listbox" B is to be filled
right after the document was loaded, it can be "filled" (i.e. generated)
by the server like "listbox" A.

Yeap, but ...
I think intrader speak about to refiling the 2nd selector after a choice
in the 1st one ... no ?
(4 lists (alternatively I presume) in selector B)

The `option' property of HTMLSelectElement objects refers to an
HTMLOptionsCollection object, not an Array object.

may be intrader used a shortcut ? and he would want to say :
manipulate the options elements using an array of their values + texts
?

 

[Jake Barnes]

En réponse à Sisilla qui écrivit, en date du : 8/09/07 14:55, le
message suivant :




so this "query-script" is server-side code, no ?


this time it is the JS script, no ?


<script type="text/javascript">
<? myQueryToMeToMe(); ?>
var arg_1 = '<?= $arg_1 ?>';
var arg_2 = '<?= $arg_2 ?>';
</script>


<script type="text/javascript">
window.onload = function() {
var s = document.createElement('script');
s.src = "<?= $file ?>";
document.body.appendChild(s);}

</script>

I think you should almost never assign a function directly to the
onload event like this, as it may conflict with other actions that
need to be assigned to the onload event. Instead, one should always
use Simon Wilison's addLoadEvent function:

http://simonwillison.net/2004/May/26/addLoadEvent/


function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}



You call it like this:

addLoadEvent(function() {
/* more code to run on page load */
});



This allows more than one action to be assigned to the onload event.

 

[Thomas 'PointedEars' Lahn]

This is a common occurrence in RIA applications. It is perhaps possible
to do this via innerHTML replacement, however, the way I have done it is
via direct manipulation of the option arrays in the listboxes.

The `option' property of HTMLSelectElement objects refers to an
HTMLOptionsCollection object, not an Array object.

http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-94282980
[...]

I did make a polite request already that you would trim your quotes, and
that you would not quote signatures unless you are referring to it, did I
not? (Further disregard of that request will cause your postings to be
ignored by me.)

You are correct about the HTMLOptionsCollection interface of DOM2.

Not to confuse the matter, the options attribute is available as an
Array object in javascript.

It isn't. It is available as an HTMLOptionsCollection object, a host
object. In contrast, Array objects are native objects that have Array()
as their constructor.

So if you have a listbox A, you can say getElementById('A').options[3]
to get at the fourth object of type Option.

That is correct to some excent (it is not a listbox, getElementById() is
a property of Document objects, not of the Global Object; Option is not a
type), however that a property of an object can be accessed by the bracket
property accessor syntax does not make that object an Array object. Nor
would a property of an object that can be accessed by the dot property
accessor syntax make that object not an Array object.

To make the wording of my statement clear, when I say 'option arrays',
this an English sentence form to indicate one or more arrays of options.

Your wording is clear, however you have at least one misconception about
the programming language you are using.


PointedEars

 

[Dr J R Stockton]

intrader said the following on 9/11/2007 8:50 PM:

Simply delete the text you don't want to quote or re-post. That is
always the text after you stop replying and sometimes text before that.

There's more to it than that, as the FAQ says, and as it omits.

The response to each separate point should follow it and precede dealing
with the next separate point.

There should be a blank line between quoted matter and its response, and
at least one between a response and the next quoted matter.

When re-quoting, those blank lines should not be removed; they should be
given with quote-marks, as above.

 

[Sisilla]

No, it is conceivable. I am doing that myself.


Good luck.

However, I am still not convinced that using `innerHTML' (which is a
proprietary property, BTW) is even necessary here. If you change the
content of the document when it is just loaded anyway, why could the
server not generate the proper markup (with all options properly
selected) in the first place?

PointedEars- Hide quoted text -

- Show quoted text -

Sorry for the late response, but I just wanted to let you know that
the problem is solved. I execute two queries. The first query decides
what options should be available in the listbox and the second query
decides whether or not each of these options should be pre-selected or
not. Then I update the innerHTML.

It is not possible to run the first query, populate the listbox with
options via innerHTML and then execute the second query and use
javascript to pre-select the appropriate options. For this to work, I
will need to find a way to ensure that the listbox is populated before
the options are pre-selected. I have not been able to find a way to
control the order in which these functions are executed.

Thank you all for your responses. I greatly appreciate all your help.
Cheers!