Calling function in dynamic replaced content
deepres
I have the following problem. In my application I'm dynamically
replacing some of web-page content. For example, I have something like
that:
<span id="ui_tr_22_1_treeJ_span" >
<div id="ui_tr_22_1_treeJ"></div>
<script type="text/javascript">
function fun (){
Yahoo tree is generating....
}
</script>
<input type='text' onclick="fun()"></input>
</span>
This span is replaced by DWR to another which has different body of fun
function. My problem is that after the change, when I'm sure that DOM
was properly updated, it's called an original version of fun function.
Thanks in advance for any clues.
Regards,
Peter
Randy Webb
> Hi,
>
> I have the following problem. In my application I'm dynamically
> replacing some of web-page content. For example, I have something like
> that:
Which is invalid HTML.
> <span id="ui_tr_22_1_treeJ_span" >
> <div id="ui_tr_22_1_treeJ"></div>
> <script type="text/javascript">
>
> function fun (){
>
> Yahoo tree is generating....
>
> }
> </script>
> <input type='text' onclick="fun()"></input>
> </span>
>
> This span is replaced by DWR to another which has different body of fun
> function.
"DWR"?
> My problem is that after the change, when I'm sure that DOM
> was properly updated, it's called an original version of fun function.
Sample test page that demonstrates the problem? But, it is probably
going to lead to the fact that you are replacing it using innerHTML and
the script block isn't getting updated.
Very last message in the thread.
--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
deepres
Randy Webb napisal(a):
> deepres said the following on 11/23/2006 9:24 AM:
> > Hi,
> >
> > I have the following problem. In my application I'm dynamically
> > replacing some of web-page content. For example, I have something like
> > that:
>
> Which is invalid HTML.
>
> > <span id="ui_tr_22_1_treeJ_span" >
> > <div id="ui_tr_22_1_treeJ"></div>
> > <script type="text/javascript">
> >
> > function fun (){
> >
> > Yahoo tree is generating....
> >
> > }
> > </script>
> > <input type='text' onclick="fun()"></input>
> > </span>
> >
> > This span is replaced by DWR to another which has different body of fun
> > function.
>
> "DWR"?
AJAX wrapper
>
> > My problem is that after the change, when I'm sure that DOM
> > was properly updated, it's called an original version of fun function.
>
> Sample test page that demonstrates the problem? But, it is probably
> going to lead to the fact that you are replacing it using innerHTML and
> the script block isn't getting updated.
Indeed, that was the reason that i put the tree generation block into a
body of function, to be able to ivoke it manually. Unfortunately, its
original state is conserved.
>
> <URL:
> http://groups-beta.google.com/group/comp.lang.javascript/browse_frm/thread/fb360f782ef616ad/26af58522a10514d?lnk=gst&q=randy+webb+loadjsfile+getElementsByTagName&rnum=1#26af58522a10514d>
>
> Very last message in the thread.
Thanks for that :)
>
> --
> Randy
> Chance Favors The Prepared Mind
> comp.lang.javascript FAQ - http://jibbering.com/faq
> Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Peter
Randy Webb
> Randy Webb napisal(a):
>> deepres said the following on 11/23/2006 9:24 AM:
>>> Hi,
>>>
>>> I have the following problem. In my application I'm dynamically
>>> replacing some of web-page content. For example, I have something like
>>> that:
>> Which is invalid HTML.
> Just for this example i've shortened the content of fun function.
The content of fun function had nothing to do with it being invalid HTML.
>>> My problem is that after the change, when I'm sure that DOM
>>> was properly updated, it's called an original version of fun function.
>> Sample test page that demonstrates the problem? But, it is probably
>> going to lead to the fact that you are replacing it using innerHTML and
>> the script block isn't getting updated.
>
> Indeed, that was the reason that i put the tree generation block into a
> body of function, to be able to ivoke it manually. Unfortunately, its
> original state is conserved.
Because it isn't executed when you replace it via innerHTML.
deepres
On 24 Lis, 10:09, Randy Webb <HikksNotAtH...@aol.com> wrote:
> deepres said the following on 11/24/2006 3:42 AM:
>
> > Randy Webb napisal(a):
> >> deepres said the following on 11/23/2006 9:24 AM:
> >>> Hi,
>
> >>> I have the following problem. In my application I'm dynamically
> >>> replacing some of web-page content. For example, I have something like
> >>> that:
> >> Which is invalid HTML.
>
> >>> My problem is that after the change, when I'm sure that DOM
> >>> was properly updated, it's called an original version of fun function.
> >> Sample test page that demonstrates the problem? But, it is probably
> >> going to lead to the fact that you are replacing it using innerHTML and
> >> the script block isn't getting updated.
>
> > Indeed, that was the reason that i put the tree generation block into a
> > body of function, to be able to ivoke it manually. Unfortunately, its
>
> --
> Randy
> Chance Favors The Prepared Mind
> comp.lang.javascript FAQ -http://jibbering.com/faq
> Javascript Best Practices -http://www.JavascriptToolbox.com/bestpractices/
Ok, problem solved. I took the method from the link you pasted here.
After few modifications, it works fine for me. Just for the record, its
current version:
function loadHTMLFragment(spanId, someFragment){
document.getElementById(spanId).innerHTML = someFragment;
//notes below on that br element
var d =
document.getElementById(spanId).getElementsByTagName('script');
var t = d.length;
;
for (var x=0;x<t;x++){;
var newScript = document.createElement('script');
newScript.type = "text/javascript";
newScript.text = d[x].text;
document.getElementById(spanId).removeChild(document.getElementById(spanId).getElementsByTagName("script")[x]);
document.getElementById(spanId).appendChild(newScript);
}
}
Is this a good idea to remove this redundant script element in that way
? And could you tell me why this fragment of code is not a valid HTML.
Anyway, thanks for help,
Peter
Randy Webb
<snip>
> Ok, problem solved. I took the method from the link you pasted here.
> After few modifications, it works fine for me. Just for the record, its
> current version:
>
> function loadHTMLFragment(spanId, someFragment){
> document.getElementById(spanId).innerHTML = someFragment;
> //notes below on that br element
> var d =
> document.getElementById(spanId).getElementsByTagName('script');
> var t = d.length;
>
> ;
> for (var x=0;x<t;x++){;
> var newScript = document.createElement('script');
> newScript.type = "text/javascript";
> newScript.text = d[x].text;
>
> document.getElementById(spanId).removeChild(document.getElementById(spanId).getElementsByTagName("script")[x]);
> document.getElementById(spanId).appendChild(newScript);
> }
> }
>
> Is this a good idea to remove this redundant script element in that way
> ?
It doesn't hurt and would probably help. I will add it to my generic
function though as it's a good idea.
> And could you tell me why this fragment of code is not a valid HTML.
The 'div' element is not allowed as a child of 'span' elements in valid
HTML.
--
Randy
Chance Favors The Prepared Mind
Randy Webb
> Ok, problem solved.
Not quite, after looking at it some more.
> I took the method from the link you pasted here.
OK, but you modified it to a point where it has a bug left in it with
regards to IE7, not sure about previous versions of IE.
> After few modifications, it works fine for me. Just for the record, its
> current version:
>function loadHTMLFragment(spanId, someFragment){
> document.getElementById(spanId).innerHTML = someFragment;
> //notes below on that br element
See the comment there? You removed the element. In IE7 if your fragment
begins with a script element then it won't process that element.
> var d =
> document.getElementById(spanId).getElementsByTagName('script');
> var t = d.length;
>
> ;
> for (var x=0;x<t;x++){;
> var newScript = document.createElement('script');
> newScript.type = "text/javascript";
> newScript.text = d[x].text;
>
> document.getElementById(spanId).removeChild(document.getElementById(spanId).getElementsByTagName("script")[x]);
> document.getElementById(spanId).appendChild(newScript);
> }
> }
>
> Is this a good idea to remove this redundant script element in that way
> ?
At first I thought it was but now I don't. If the fragment contains
multiple script blocks then removing them will change the index of the
remaining script blocks and testing confirms that notion. So, the
removal has to be moved outside of the loop and put into it's own loop.
Run this fragment through your version and you will get First Alert,
Third Alert, Third Alert:
<hr>
<script type="text"/javascript">
alert('First script block')
</script>
<script type="text"/javascript">
alert('Second script block')
</script>
<script type="text"/javascript">
alert('Third script block')
</script>
New, improved version:
function loadHTMLFragment(elemId, someFragment)
{
if (document &&
document.getElementById &&
document.getElementById(elemId) &&
document.createElement &&
document.appendChild &&
document.getElementsByTagName)
//are any of those tests superfluous or
//any that need to be added?
{
var el = document.getElementById(elemId);
el.innerHTML = someFragment;
//I need an empty element there for IE :(
//that takes up no display room.
var d =el.getElementsByTagName('script');
var t = d.length;
for (var x=0;x<t;x++)
{
var newScript = document.createElement('script');
newScript.type = "text/javascript";
newScript.text = d[x].text;
el.appendChild(newScript);
}
for (var y=0;y<t;y++)
{
el.removeChild(el.getElementsByTagName("script")[y]);
}
}
}
There is still an issue with it in IE7 that I am looking into to try to
solve it.
Maybe this can be my first FAQ Notes page :\
--
Randy
Chance Favors The Prepared Mind
deepres
Randy Webb napisal(a):
Hi,
indeed, I forgot to send a little update for these issues. I was
testing this code with IE ( v. 6 ) and I needed a visual element which
was producing a new line ( like <br> but not <nobr> ) to get required
behaviour. Unfortunately this 'feature' was messing in the layout of
other components within a page, so I did something like this:
function loadHTMLFragment(spanId, someFragment) {
document.getElementById(spanId).innerHTML = '<br>' +
someFragment;
var d =
document.getElementById(spanId).getElementsByTagName('script');
var t = d.length;
for (var x = 0; x < t; x++) {
var newScript = document.createElement('script');
newScript.type = "text/javascript";
newScript.text = d[x].text;
document.getElementById(spanId).removeChild(document.getElementById(spanId).getElementsByTagName("script")[x]);
document.getElementById(spanId).appendChild(newScript);
}
// taken from your code
for (var y = 0; y < t; y++) {
document.getElementById(spanId).removeChild(document.getElementById(spanId).getElementsByTagName("script")[y]);
}
document.getElementById(spanId).removeChild(document.getElementById(spanId).getElementsByTagName("br")[0]);
}
I know that it is not an elegant solution but, at least, it's working
:) And one more thing, this trick ( with additional visual element )
didn't work on Safari..
Regards,
Peter
Randy Webb
<snip>
> Hi,
>
> indeed, I forgot to send a little update for these issues. I was
> testing this code with IE ( v. 6 ) and I needed a visual element which
> was producing a new line ( like <br> but not <nobr> ) to get required
> behaviour. Unfortunately this 'feature' was messing in the layout of
> other components within a page, so I did something like this:
In testing it locally, I changed the <br> to a and it seems to
have satisfied IE7, does it satisfy IE6?
And, please don't indent code so far to be posted. Use single or double
spaces instead.
>function loadHTMLFragment(spanId, someFragment) {
> document.getElementById(spanId).innerHTML = '<br>' + someFragment;
Change that line to this:
document.getElementById(spanId).innerHTML = " " + someFragment;
> var d = document.getElementById(spanId).getElementsByTagName('script');
> var t = d.length;
> for (var x = 0; x < t; x++) {
> var newScript = document.createElement('script');
> newScript.type = "text/javascript";
> newScript.text = d[x].text;
> document.getElementById(spanId).removeChild(document.getElementById(spanId).getElementsByTagName("script")[x]);
> document.getElementById(spanId).appendChild(newScript);
> }
> // taken from your code
> for (var y = 0; y < t; y++) {
> document.getElementById(spanId).removeChild(document.getElementById(spanId).getElementsByTagName("script")[y]);
> }
>
> document.getElementById(spanId).removeChild(document.getElementById(spanId).getElementsByTagName("br")[0]);
Making the above change requires removing the above line.
> }
> I know that it is not an elegant solution but, at least, it's working
> :)
Does the work in IE6 to trigger execution?
> And one more thing, this trick ( with additional visual element )
> didn't work on Safari..
Which Safari (what version?) and, what does it do? Does it error out,
nothing, or what?
I renamed the parameter to HTMLFragment instead of someFragment, here is
my revised version:
function loadHTMLFragment(elemId, HTMLFragment)
{
if (document &&
document.getElementById &&
document.getElementById(elemId) &&
document.createElement &&
document.appendChild &&
document.getElementsByTagName)
{
var el = document.getElementById(elemId);
el.innerHTML = " " + HTMLFragment;
//The is a hack to cause IE to process the
//script elements if the first node in the
//HTMLFragment is a script element.
var d =el.getElementsByTagName('script');
var t = d.length;
for (var x=0;x<t;x++)
{
var newScript = document.createElement('script');
newScript.type = "text/javascript";
newScript.text = d[x].text;
el.appendChild(newScript);
}
for (var y=0;y<t;y++)
{
el.removeChild(el.getElementsByTagName("script")[y]);
}
}
document.myForm.output.value = el.innerHTML;
Randy Webb
<snip>
> I renamed the parameter to HTMLFragment instead of someFragment, here is
> my revised version:
<snip>
> document.myForm.output.value = el.innerHTML;
Remove that line, it is part of my testing code in a sample page and I
forgot to remove it before posting.
deepres
deepres napisal(a):
//document.getElementById(spanId).removeChild(document.getElementById(spanId).getElementsByTagName("script")[x]);
deepres
Randy Webb napisal(a):
> deepres said the following on 11/27/2006 4:28 AM:
>
> <snip>
>
> > Hi,
> >
> > indeed, I forgot to send a little update for these issues. I was
> > testing this code with IE ( v. 6 ) and I needed a visual element which
> > was producing a new line ( like <br> but not <nobr> ) to get required
> > behaviour. Unfortunately this 'feature' was messing in the layout of
> > other components within a page, so I did something like this:
>
> In testing it locally, I changed the <br> to a and it seems to
> have satisfied IE7, does it satisfy IE6?
>
> And, please don't indent code so far to be posted. Use single or double
> spaces instead.
>
> >function loadHTMLFragment(spanId, someFragment) {
> > document.getElementById(spanId).innerHTML = '<br>' + someFragment;
>
> Change that line to this:
>
> document.getElementById(spanId).innerHTML = " " + someFragment;
>
> > var d = document.getElementById(spanId).getElementsByTagName('script');
> > var t = d.length;
> > for (var x = 0; x < t; x++) {
> > var newScript = document.createElement('script');
> > newScript.type = "text/javascript";
> > newScript.text = d[x].text;
> > document.getElementById(spanId).removeChild(document.getElementById(spanId).getElementsByTagName("script")[x]);
> > document.getElementById(spanId).appendChild(newScript);
> > }
> > // taken from your code
> > for (var y = 0; y < t; y++) {
> > document.getElementById(spanId).removeChild(document.getElementById(spanId).getElementsByTagName("script")[y]);
> > }
> >
> > document.getElementById(spanId).removeChild(document.getElementById(spanId).getElementsByTagName("br")[0]);
>
> Making the above change requires removing the above line.
>
> > }
>
> > I know that it is not an elegant solution but, at least, it's working
> > :)
>
> Does the work in IE6 to trigger execution?
>
> > And one more thing, this trick ( with additional visual element )
> > didn't work on Safari..
>
> Which Safari (what version?) and, what does it do? Does it error out,
> nothing, or what?
>
The latest version of this function was tested on Safari 2.0.4 without
any effects ( no errors, no alerts ). I've also added some alert in the
else case - with the same result.
> I renamed the parameter to HTMLFragment instead of someFragment, here is
> my revised version:
>
> function loadHTMLFragment(elemId, HTMLFragment)
> {
> if (document &&
> document.getElementById &&
> document.getElementById(elemId) &&
> document.createElement &&
> document.appendChild &&
> document.getElementsByTagName)
> {
> var el = document.getElementById(elemId);
> el.innerHTML = " " + HTMLFragment;
> //The is a hack to cause IE to process the
> //script elements if the first node in the
> //HTMLFragment is a script element.
>
> var d =el.getElementsByTagName('script');
> var t = d.length;
> for (var x=0;x<t;x++)
> {
> var newScript = document.createElement('script');
> newScript.type = "text/javascript";
> newScript.text = d[x].text;
> el.appendChild(newScript);
> }
> for (var y=0;y<t;y++)
> {
Here it should be:
el.removeChild(el.getElementsByTagName("script")[0]);
Ohterwise, if we will have 2 scirpts, lets say 1 and 2. after the
'appendChild' loop we'll have four in the following order [1,2,1,2]. In
the original form the 'removeChild' loop would delete the two '1''s
scripts.
> el.removeChild(el.getElementsByTagName("script")[y]);
> }
> }
> document.myForm.output.value = el.innerHTML;
> }
>
> --
> Randy
> Chance Favors The Prepared Mind
> comp.lang.javascript FAQ - http://jibbering.com/faq
> Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Sorry for eventual reposting (This is my second attempt to send this
message).
Peter
Randy Webb
> Randy Webb napisal(a):
>> deepres said the following on 11/27/2006 4:28 AM:
>>
<snip>
>> Does the work in IE6 to trigger execution?
>>
>>> And one more thing, this trick ( with additional visual element )
>>> didn't work on Safari..
>> Which Safari (what version?) and, what does it do? Does it error out,
>> nothing, or what?
>>
>
> The latest version of this function was tested on Safari 2.0.4 without
> any effects ( no errors, no alerts ). I've also added some alert in the
> else case - with the same result.
Then there is something in the if test that it isn't passing:
if (document &&
document.getElementById &&
document.getElementById(elemId) &&
document.createElement &&
document.appendChild &&
document.getElementsByTagName)
The way to start testing it is to narrow it down with some alerts and
see where it stops at. If it passes all the test, then Safari may not
support the setting of the .text property of a script element. Without a
mac and Safari I can't test it though. If you figure out what is causing
Safari to die over on it please let me know.
<snip>
> Here it should be:
>
> el.removeChild(el.getElementsByTagName("script")[0]);
>
> Ohterwise, if we will have 2 scirpts, lets say 1 and 2. after the
> 'appendChild' loop we'll have four in the following order [1,2,1,2]. In
> the original form the 'removeChild' loop would delete the two '1''s
> scripts.
Indeed, and it is corrected in my local version.
--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Answer:It destroys the order of the conversation
Question: Why?
Answer: Top-Posting.
Question: Whats the most annoying thing on Usenet?
mike....@gmail.com
For Safari (2.0.4) I found that the "text" attribute on the "script"
element is not supported.
However, the "innerHTML" attribute is supported for the script element
and it works just like setting the "text" attribute does in Firefox and
other browsers.
Michael
On Nov 28 2006, 12:42 am, Randy Webb <HikksNotAtH...@aol.com> wrote:
> deepres said the following on 11/27/2006 10:08 AM:
>
> > Randy Webb napisal(a):
> >> deepres said the following on 11/27/2006 4:28 AM:<snip>
>
> >> Does the work in IE6 to trigger execution?
>
> >>> And one more thing, this trick ( with additional visual element )
> >>> didn't work on Safari..
> >> Which Safari (what version?) and, what does it do? Does it error out,
> >> nothing, or what?
>
> > The latest version of this function was tested on Safari 2.0.4 without
> > any effects ( no errors, no alerts ). I've also added some alert in the
> > else case - with the same result.Then there is something in the if test that it isn't passing:
>
> if (document &&
> document.getElementById &&
> document.getElementById(elemId) &&
> document.createElement &&
> document.appendChild &&
> document.getElementsByTagName)
>
> The way to start testing it is to narrow it down with some alerts and
> see where it stops at. If it passes all the test, then Safari may not
> support the setting of the .text property of a script element. Without a
> mac and Safari I can't test it though. If you figure out what is causing
> Safari to die over on it please let me know.
>
> <snip>
>
> > Here it should be:
>
> > el.removeChild(el.getElementsByTagName("script")[0]);
>
> > Ohterwise, if we will have 2 scirpts, lets say 1 and 2. after the
> > 'appendChild' loop we'll have four in the following order [1,2,1,2]. In
> > the original form the 'removeChild' loop would delete the two '1''s
> > scripts.Indeed, and it is corrected in my local version.
>
> --
> Randy
> Chance Favors The Prepared Mind
> comp.lang.javascript FAQ -http://jibbering.com/faq
> Javascript Best Practices -http://www.JavascriptToolbox.com/bestpractices/
Randy Webb
> Hi all,
>
> For Safari (2.0.4) I found that the "text" attribute on the "script"
> element is not supported.
> However, the "innerHTML" attribute is supported for the script element
> and it works just like setting the "text" attribute does in Firefox and
> other browsers.
Example code? When you say setting the innerHTML is supported, are you
referring to setting the innerHTML of an element and script blocks get
executed, setting the innerHTML of a script element executes it or
something else?
--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
mike....@gmail.com
Setting innerHTML on the script element seems to work. So to make
things cross-browser compliant, try setting both text and innerHTML
(actually, I haven't tested whether just setting innerHTML will do the
job for other browsers, perhaps that is enough?).
Here's an example of creating a new script that works for the browser /
OSs my team and I have tested:
// Create new script
var newScript = document.createElement('script');
newScript.type = "text/javascript";
newScript.text = text;
// Safari does not recognize the "text" attribute, requires innerHTML
instead
newScript.innerHTML = text;
Here's an example of cloning another script, say:
// Create new script
var newScript = document.createElement('script');
newScript.type = "text/javascript";
newScript.text = javascript.text;
// Safari does not recognize the "text" attribute, requires innerHTML
instead
newScript.innerHTML = javascript.innerHTML;
Then you can append/remove the script element to the DOM as needed by
your app or as described in your examples above to invoke the script.
Also, I'd like to thank you for your example code earlier. Peter and I
took your solution as a starting point for creating and invoking
scripts on demand. Works quite well!
Regards,
Mike
On Jan 23, 1:21 pm, Randy Webb <HikksNotAtH...@aol.com> wrote:
> mike.poz...@gmail.com said the following on 1/23/2007 11:07 AM:
>
> > Hi all,
>
> > For Safari (2.0.4) I found that the "text" attribute on the "script"
> > element is not supported.
> > However, the "innerHTML" attribute is supported for the script element
> > and it works just like setting the "text" attribute does in Firefox and
> > other browsers.Example code? When you say setting the innerHTML is supported, are you
> referring to setting the innerHTML of an element and script blocks get
> executed, setting the innerHTML of a script element executes it or
> something else?
>
> --
> Randy
> Chance Favors The Prepared Mind
> comp.lang.javascript FAQ -http://jibbering.com/faq/index.html
Randy Webb
> Hi Randy,
>
> Setting innerHTML on the script element seems to work. So to make
> things cross-browser compliant, try setting both text and innerHTML
> (actually, I haven't tested whether just setting innerHTML will do the
> job for other browsers, perhaps that is enough?).
I have a trip to make this weekend out of town and when I get back I
will try to add an innerHTML button to the test page that tries to use
innerHTML on a generated script element so that Peter will have
something to do during his next 18 hour vacation at the LA Airport :-)
P.S. Please don't top-post here.
--
Randy
Chance Favors The Prepared Mind