Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Where to put page-specific JavaScript

Reply
Thread Tools

Where to put page-specific JavaScript

 
 
Christopher Nelson
Guest
Posts: n/a
 
      02-26-2007
I have a little menu system which essentially takes HTML like:

<div id='foo'></div>

and retrieves foo.shtml from the server and inserts it inside the
<div>. But sometimes I'd like foo.shtml to look like:

<script language='JavaScript'>
...do something AJAX-y
</script>
<div></div>

so that the script fills in the page. I've hacked together something
that inserts the foo.shtml into foo's div then does a
fooDiv.getElementsByTagName('script') and uses eval() on them and it
works most of the time in some brossers but it seems hackish and
somewhat dangerous and it doesn't work everywhere. Surely there's an
AJAX idiom (or even a DOM built-in) to execute scripts as parts of
pages load. Can someone enlighten me? TIA.

 
Reply With Quote
 
 
 
 
Randy Webb
Guest
Posts: n/a
 
      02-26-2007
Christopher Nelson said the following on 2/26/2007 11:38 AM:
> I have a little menu system which essentially takes HTML like:
>
> <div id='foo'></div>
>
> and retrieves foo.shtml from the server and inserts it inside the
> <div>. But sometimes I'd like foo.shtml to look like:
>
> <script language='JavaScript'>
> ...do something AJAX-y
> </script>
> <div></div>
>
> so that the script fills in the page. I've hacked together something
> that inserts the foo.shtml into foo's div then does a
> fooDiv.getElementsByTagName('script') and uses eval() on them and it
> works most of the time in some brossers but it seems hackish and
> somewhat dangerous and it doesn't work everywhere. Surely there's an
> AJAX idiom (or even a DOM built-in) to execute scripts as parts of
> pages load. Can someone enlighten me? TIA.


I am vaguely familiar with dynamically loading scripts, so, this thread
may help you. You will find more information and links about the problem
you have than you probably wanted to know

<URL:
http://groups.google.com.au/group/comp.lang.javascript/browse_frm/thread/7e23f42490c301de/3441a1cc21869a10?lnk=gst&q=createTextNode+IE+Randy +Web&rnum=1&hl=en#3441a1cc21869a10>

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
 
Reply With Quote
 
 
 
 
Christopher Nelson
Guest
Posts: n/a
 
      02-26-2007
On Feb 26, 1:01 pm, Randy Webb <(E-Mail Removed)> wrote:
> Christopher Nelson said the following on 2/26/2007 11:38 AM:
>
>
>
> > I have a little menu system which essentially takes HTML like:

>
> > <div id='foo'></div>

>
> > and retrieves foo.shtml from the server and inserts it inside the
> > <div>. But sometimes I'd like foo.shtml to look like:

>
> > <script language='JavaScript'>
> > ...do something AJAX-y
> > </script>
> > <div></div>

>
> > so that the script fills in the page. I've hacked together something
> > that inserts the foo.shtml into foo's div then does a
> > fooDiv.getElementsByTagName('script') and uses eval() on them and it
> > works most of the time in some brossers but it seems hackish and
> > somewhat dangerous and it doesn't work everywhere. Surely there's an
> > AJAX idiom (or even a DOM built-in) to execute scripts as parts of
> > pages load. Can someone enlighten me? TIA.

>
> I am vaguely familiar with dynamically loading scripts, so, this thread
> may help you. You will find more information and links about the problem
> you have than you probably wanted to know
>
> <URL:http://groups.google.com.au/group/comp.lang.javascript/browse_frm/thr...>


Thanks. I wish that thread ended, "And this is the best way to do
it..." It seems that the most portable method of getting scripts
loaded is creating script elements and setting the scr property. At
http://members.aol.com/_ht_a/hikksnotathome/loadJSFile/ I found:

function cElement(fileName) {
var s = document.createElement('script');
s.src = fileName; //the name of the JS file.
document.getElementById('scriptDiv').appendChild(s );
}

With most of the corresponding column green. Is that an accurate
summary? For my situation, it seems that rather than having foo.shtml
with an embedded script tag, I should have foo.shtml with some
structure and a companion foo.js which gets loaded into that structure
with the code above. Or am I missing the boat somehow?

 
Reply With Quote
 
Christopher Nelson
Guest
Posts: n/a
 
      02-26-2007
On Feb 26, 2:50 pm, "Christopher Nelson" <(E-Mail Removed)> wrote:
> On Feb 26, 1:01 pm, Randy Webb <(E-Mail Removed)> wrote:
>
>
>
> > Christopher Nelson said the following on 2/26/2007 11:38 AM:

>
> > > I have a little menu system which essentially takes HTML like:

>
> > > <div id='foo'></div>

>
> > > and retrieves foo.shtml from the server and inserts it inside the
> > > <div>. But sometimes I'd like foo.shtml to look like:

>
> > > <script language='JavaScript'>
> > > ...do something AJAX-y
> > > </script>
> > > <div></div>

>
> > > so that the script fills in the page. I've hacked together something
> > > that inserts the foo.shtml into foo's div then does a
> > > fooDiv.getElementsByTagName('script') and uses eval() on them and it
> > > works most of the time in some brossers but it seems hackish and
> > > somewhat dangerous and it doesn't work everywhere. Surely there's an
> > > AJAX idiom (or even a DOM built-in) to execute scripts as parts of
> > > pages load. Can someone enlighten me? TIA.

>
> > I am vaguely familiar with dynamically loading scripts, so, this thread
> > may help you. You will find more information and links about the problem
> > you have than you probably wanted to know

>
> > <URL:http://groups.google.com.au/group/comp.lang.javascript/browse_frm/thr...>

>
> Thanks. I wish that thread ended, "And this is the best way to do
> it..." It seems that the most portable method of getting scripts
> loaded is creating script elements and setting the scr property. Athttp://members.aol.com/_ht_a/hikksnotathome/loadJSFile/I found:
>
> function cElement(fileName) {
> var s = document.createElement('script');
> s.src = fileName; //the name of the JS file.
> document.getElementById('scriptDiv').appendChild(s );
> }
>
> With most of the corresponding column green. Is that an accurate
> summary? For my situation, it seems that rather than having foo.shtml
> with an embedded script tag, I should have foo.shtml with some
> structure and a companion foo.js which gets loaded into that structure
> with the code above. Or am I missing the boat somehow?


It seems Michael Foster thinks this is the way to go:

http://www.cross-browser.com/x/lib/v...ym=xLoadScript

 
Reply With Quote
 
Randy Webb
Guest
Posts: n/a
 
      02-27-2007
Christopher Nelson said the following on 2/26/2007 4:31 PM:
> On Feb 26, 2:50 pm, "Christopher Nelson" <(E-Mail Removed)> wrote:
>> On Feb 26, 1:01 pm, Randy Webb <(E-Mail Removed)> wrote:
>>
>>
>>
>>> Christopher Nelson said the following on 2/26/2007 11:38 AM:
>>>> I have a little menu system which essentially takes HTML like:
>>>> <div id='foo'></div>
>>>> and retrieves foo.shtml from the server and inserts it inside the
>>>> <div>. But sometimes I'd like foo.shtml to look like:
>>>> <script language='JavaScript'>
>>>> ...do something AJAX-y
>>>> </script>
>>>> <div></div>
>>>> so that the script fills in the page. I've hacked together something
>>>> that inserts the foo.shtml into foo's div then does a
>>>> fooDiv.getElementsByTagName('script') and uses eval() on them and it
>>>> works most of the time in some brossers but it seems hackish and
>>>> somewhat dangerous and it doesn't work everywhere. Surely there's an
>>>> AJAX idiom (or even a DOM built-in) to execute scripts as parts of
>>>> pages load. Can someone enlighten me? TIA.
>>> I am vaguely familiar with dynamically loading scripts, so, this thread
>>> may help you. You will find more information and links about the problem
>>> you have than you probably wanted to know
>>> <URL:http://groups.google.com.au/group/comp.lang.javascript/browse_frm/thr...>

>> Thanks. I wish that thread ended, "And this is the best way to do
>> it..."


Maybe I should post a reply to it and say "This is the best way to do
it" and refer to the function you listed below.

>> It seems that the most portable method of getting scripts
>> loaded is creating script elements and setting the scr property.


Yes, that is the best way of doing it.

>> At http://members.aol.com/_ht_a/hikksno...e/loadJSFile/I found:
>>
>> function cElement(fileName) {
>> var s = document.createElement('script');
>> s.src = fileName; //the name of the JS file.
>> document.getElementById('scriptDiv').appendChild(s );
>> }


Yes, that is a function I wrote about 3 or 4 years ago to load a .js
file on the fly. And to date, I have not come up with a better course to
do it.

>> With most of the corresponding column green. Is that an accurate
>> summary?


Yes, a very accurate summary based on multiple people testing the page
for me to come up with those results.

>> For my situation, it seems that rather than having foo.shtml
>> with an embedded script tag, I should have foo.shtml with some
>> structure and a companion foo.js which gets loaded into that structure
>> with the code above. Or am I missing the boat somehow?


That is probably the simplest way. You would load pageName.shtml and
pageName.js. Another option is to scan the innerHTML for SCRIPT
elements. If it has a source, load the .js file. If it has content, then
insert that content into the page.

> It seems Michael Foster thinks this is the way to go:
>
> http://www.cross-browser.com/x/lib/v...ym=xLoadScript


About the only difference between that function and mine (aside from the
feature tests) is that his is appending to the head element where mine
appends it in a DIV element that is solely for the purpose of appending
script elements (hence it's name of scriptDiv). The reason mine is
written that way is that when you load a file, load another, load
another, and so on, every single one of those files will remain a memory
load. Placing the script blocks in a div element makes it easier to
remove the. You can either cycle through the children of scriptDiv and
remove all the script blocks or simply set it's innerHTML to "" and the
previously loaded scripts are dumped and available for Garbage
Collection and free up the memory.

Thread that shows how to parse out script elements:

<URL:
http://groups.google.com/group/comp.lang.javascript/browse_frm/thread/fb360f782ef616ad/26af58522a10514d?lnk=gst&q=randy+webb+loadjsfile+g etElementsByTagName&rnum=1>

Another on removing script elements:

<URL:
http://groups.google.com/group/comp.lang.javascript/browse_thread/thread/56498ef2fabcefc8/2c55e50ba6f6fc66?lnk=gst&q=loadjsfile&rnum=8#2c55e 50ba6f6fc66>

Right now Google Groups doesn't seem to be finding searches correctly
for the last 6 months or so. If you can find some threads with
loadJSFile in them a lot of them refer to other threads where some other
aspects of it were talked about. Another is the first thread where it
points to other threads (that I cant find via a Google Search).

This is another where it is discussed about injecting script blocks
(that are parsed out of the innerHTML block) and some of the associated
problems:

<URL:
http://groups.google.com/group/comp.lang.javascript/browse_thread/thread/b1cee183e87aadc2/cf32cc0137dee3f2?lnk=gst&q=loadjsfile&rnum=1#cf32c c0137dee3f2>

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
 
Reply With Quote
 
-Lost
Guest
Posts: n/a
 
      02-27-2007
"Randy Webb" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> Christopher Nelson said the following on 2/26/2007 4:31 PM:
>> On Feb 26, 2:50 pm, "Christopher Nelson" <(E-Mail Removed)> wrote:
>>> On Feb 26, 1:01 pm, Randy Webb <(E-Mail Removed)> wrote:
>>>>
>>>> Christopher Nelson said the following on 2/26/2007 11:38 AM:
>>>>> I have a little menu system which essentially takes HTML like:
>>>>> <div id='foo'></div>
>>>>> and retrieves foo.shtml from the server and inserts it inside the
>>>>> <div>. But sometimes I'd like foo.shtml to look like:
>>>>> <script language='JavaScript'>
>>>>> ...do something AJAX-y
>>>>> </script>
>>>>> <div></div>
>>>>> so that the script fills in the page. I've hacked together something
>>>>> that inserts the foo.shtml into foo's div then does a
>>>>> fooDiv.getElementsByTagName('script') and uses eval() on them and it
>>>>> works most of the time in some brossers but it seems hackish and
>>>>> somewhat dangerous and it doesn't work everywhere. Surely there's an
>>>>> AJAX idiom (or even a DOM built-in) to execute scripts as parts of
>>>>> pages load. Can someone enlighten me? TIA.
>>>> I am vaguely familiar with dynamically loading scripts, so, this thread
>>>> may help you. You will find more information and links about the problem
>>>> you have than you probably wanted to know
>>>> <URL:http://groups.google.com.au/group/comp.lang.javascript/browse_frm/thr...>
>>> Thanks. I wish that thread ended, "And this is the best way to do
>>> it..."

>
> Maybe I should post a reply to it and say "This is the best way to do it" and refer to
> the function you listed below.
>
>>> It seems that the most portable method of getting scripts
>>> loaded is creating script elements and setting the scr property.

>
> Yes, that is the best way of doing it.
>
>>> At http://members.aol.com/_ht_a/hikksno...e/loadJSFile/I found:
>>>
>>> function cElement(fileName) {
>>> var s = document.createElement('script');
>>> s.src = fileName; //the name of the JS file.
>>> document.getElementById('scriptDiv').appendChild(s );
>>> }

>
> Yes, that is a function I wrote about 3 or 4 years ago to load a .js file on the fly.
> And to date, I have not come up with a better course to do it.
>
>>> With most of the corresponding column green. Is that an accurate
>>> summary?

>
> Yes, a very accurate summary based on multiple people testing the page for me to come up
> with those results.
>
>>> For my situation, it seems that rather than having foo.shtml
>>> with an embedded script tag, I should have foo.shtml with some
>>> structure and a companion foo.js which gets loaded into that structure
>>> with the code above. Or am I missing the boat somehow?

>
> That is probably the simplest way. You would load pageName.shtml and pageName.js.
> Another option is to scan the innerHTML for SCRIPT elements. If it has a source, load
> the .js file. If it has content, then insert that content into the page.
>
>> It seems Michael Foster thinks this is the way to go:
>>
>> http://www.cross-browser.com/x/lib/v...ym=xLoadScript

>
> About the only difference between that function and mine (aside from the feature tests)
> is that his is appending to the head element where mine appends it in a DIV element that
> is solely for the purpose of appending script elements (hence it's name of scriptDiv).
> The reason mine is written that way is that when you load a file, load another, load
> another, and so on, every single one of those files will remain a memory load. Placing
> the script blocks in a div element makes it easier to remove the. You can either cycle
> through the children of scriptDiv and remove all the script blocks or simply set it's
> innerHTML to "" and the previously loaded scripts are dumped and available for Garbage
> Collection and free up the memory.


Hrmm... I assume you forgot the word script in "easier to remove the." So anyway, I was
wondering if you load however many scripts, you can at some point remove them and they can
still be available to the script?

(Admittedly, I did not test it. Forgive my laziness!)

Or we are just talking about getting rid of scripts that are no longer used?

-Lost


 
Reply With Quote
 
Christopher Nelson
Guest
Posts: n/a
 
      02-27-2007
On Feb 26, 9:28 pm, Randy Webb <(E-Mail Removed)> wrote:
> ...
> > It seems Michael Foster thinks this is the way to go:

>
> > http://www.cross-browser.com/x/lib/v...ym=xLoadScript

>
> About the only difference between that function and mine (aside from the
> feature tests) is that his is appending to the head element where mine
> appends it in a DIV element that is solely for the purpose of appending
> script elements (hence it's name of scriptDiv). ...


He has another function which keeps track of scripts so that they
aren't loaded twice and it may -- I don't recall -- set things up so
they can be deleted. I don't really understand what difference it
makes -- in general, of specific to any browser -- whether the script
is in the head or body.

 
Reply With Quote
 
Christopher Nelson
Guest
Posts: n/a
 
      02-27-2007
On Feb 26, 9:28 pm, Randy Webb <(E-Mail Removed)> wrote:
> ...
> >> For my situation, it seems that rather than having foo.shtml
> >> with an embedded script tag, I should have foo.shtml with some
> >> structure and a companion foo.js which gets loaded into that structure
> >> with the code above. Or am I missing the boat somehow?

>
> That is probably the simplest way. You would load pageName.shtml and
> pageName.js. Another option is to scan the innerHTML for SCRIPT
> elements. If it has a source, load the .js file. If it has content, then
> insert that content into the page.
> ...


I'm not clear on what innerHTML you're referring to. If I have a
foo.shtml:

<script src='foo.js'></script>
...some content here...

and bar.shtml:

<script type='text/javascript'>
...some code here...
</script>
...some content here...

I imagine a function which:

1. Gets the .shtml file from the server
2. Replaces the target div's innerHTML with the text returned
3. Uses div.getElementsByTagName('script') to find all the scripts
in the
new content
a. If the script had a src attribute, gets the js from the server
or
b. If the script had content, extracts its innerHTML
then
Insert the script text in scriptDiv or the head or something

This makes my suggested naming convention more flexible (foo.shtml can
use something other than or in addition to foo.js). My concern is
that IE7's been doing weird things as I play and I've read that
innerHTML isn't always supported.

 
Reply With Quote
 
Randy Webb
Guest
Posts: n/a
 
      02-27-2007
-Lost said the following on 2/27/2007 3:00 AM:
> "Randy Webb" <(E-Mail Removed)> wrote in message
> news:(E-Mail Removed)...
>> Christopher Nelson said the following on 2/26/2007 4:31 PM:
>>> On Feb 26, 2:50 pm, "Christopher Nelson" <(E-Mail Removed)> wrote:


<snip>

>>> It seems Michael Foster thinks this is the way to go:
>>>
>>> http://www.cross-browser.com/x/lib/v...ym=xLoadScript

>> About the only difference between that function and mine (aside from the feature tests)
>> is that his is appending to the head element where mine appends it in a DIV element that
>> is solely for the purpose of appending script elements (hence it's name of scriptDiv).
>> The reason mine is written that way is that when you load a file, load another, load
>> another, and so on, every single one of those files will remain a memory load. Placing
>> the script blocks in a div element makes it easier to remove the. You can either cycle
>> through the children of scriptDiv and remove all the script blocks or simply set it's
>> innerHTML to "" and the previously loaded scripts are dumped and available for Garbage
>> Collection and free up the memory.

>
> Hrmm... I assume you forgot the word script in "easier to remove the."


Yes, somehow it got removed before posting.

> So anyway, I was wondering if you load however many scripts, you can at some point remove
> them and they can still be available to the script?


They would be available until they get Garbage Collected.

>
> (Admittedly, I did not test it. Forgive my laziness!)
>
> Or we are just talking about getting rid of scripts that are no longer used?


Getting rid of scripts no longer being used at the time.
--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
 
Reply With Quote
 
Randy Webb
Guest
Posts: n/a
 
      02-28-2007
Christopher Nelson said the following on 2/27/2007 8:10 AM:
> On Feb 26, 9:28 pm, Randy Webb <(E-Mail Removed)> wrote:
>> ...
>>> It seems Michael Foster thinks this is the way to go:
>>> http://www.cross-browser.com/x/lib/v...ym=xLoadScript

>> About the only difference between that function and mine (aside from the
>> feature tests) is that his is appending to the head element where mine
>> appends it in a DIV element that is solely for the purpose of appending
>> script elements (hence it's name of scriptDiv). ...

>
> He has another function which keeps track of scripts so that they
> aren't loaded twice and it may -- I don't recall -- set things up so
> they can be deleted.


I can see a possible use for not wanting to load files twice. If he has
it set up so that it doesn't load files twice then you can't delete them.

> I don't really understand what difference it makes -- in general,
> of specific to any browser -- whether the script is in the head or body.


It makes no difference as long as the order is there that they need to
be in. Meaning, a script block in the HEAD section can't try to call a
function in the BODY section until after it is loaded. But that is true
even if they are all in the body or all in the head section. The major
reason I use the scriptDiv approach is ease of removing script blocks.
Then again, all I load is pure data. The only thing in my .js files that
is not pure data is the very last line. It is a function call to call a
function in the main page to process the data in that file. It is the
only foolproof way I have come up with to know for sure the .js file has
loaded to that point.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
why does the following with Queue, q.put('\x02', True) not put itin the queue? Gabriel Rossetti Python 3 04-25-2008 03:41 PM
Put javascript enable/disable checkbox on firefox toolbar? ted@loft.tnolan.com (Ted Nolan Firefox 2 06-04-2005 07:01 PM
try to put a question for javascript - don`t beat me Jan Faerber HTML 6 10-11-2004 03:19 PM
Where to put some javascript? Jim Corey ASP .Net 2 07-02-2004 06:45 PM
How to put value in asp.net textbox from javascript? Eph0nk ASP .Net 2 08-06-2003 10:50 AM



Advertisments