Firing scripts on Ajax imported pages

[molendijk]

1) CODE TITLE: Firing scripts on Ajax imported pages

2) AUTHOR NAME: Arie Molendijk

3) DESCRIPTION: There have been several questions lately on the DD forums on how to make 'external' scripts fire on Ajax imported pages. The general idea underlying the answers given to these questions has been that these scripts generally do not execute. The goal of this thread is to show that - on the contrary - external scripts belonging to Ajax imported files can be easily forced to execute. All we have to do is document.write the external files to a hidden div.

4) URL TO CODE:
http://www.let.rug.nl/molendyk/inclu...blem/main.html

[jscheuer1]

Hi Arie,

I don't know if you intended this or not, but it doesn't look good:

Your 'imported functions' work before they are imported. So, regardless of whether or not your code performs as advertised, it looks just like it would if it had done nothing.

Also, this is not AJAX.

[molendijk]

Your 'imported functions' work before they are imported.

Excellent observation. The imported functions work before the include(content,id) function makes the external text visible because the external files containing the functions are document.written (invisibly) to the main page while it is still loading. It's the include(content,id) function that makes the text of the external files visible (at an arbitrarily chosen part of the page). In other words, this is not an authentic dynamic Ajax-include, but one that makes it look like one.

So, regardless of whether or not your code performs as advertised, it looks just like it would if it had done nothing.

No, if the code would have done nothing, the external functions would not work in the main page.
The whole idea is to (i) invisibly import external text AND code with the help of document.write (as opposite to innerHTML or appendChild, document.write brings in external code together with text); (ii) make the external text visible with innerHTML and appendChild (using the include(content,id) function).

To resume what I did: I faked dynamically including external text PLUS code by (i) bringing in external text plus code (using document.write) while the main page is loading and (ii) making the external text visible 'afterwards'.
===
Arie.

[jscheuer1]

After playing with the code you supplied in:

http://www.dynamicdrive.com/forums/s...64&postcount=7

I presumed as much as what you are saying.

I'm not sure how this is any different in effect, though much less efficient than:

<script type="text/javascript" src="some.js"></script>

[molendijk]

I'm not sure how this is any different in effect, though much less efficient than:

<script type="text/javascript" src="some.js"></script>

Yes, my code does about the same. But it does not have to transform the external content into js-format before inclusion.
===
Arie.

[jscheuer1]

Yes, my code does about the same. But it does not have to transform the external content into js-format before inclusion.
===
Arie.

An external script tag doesn't transform anything either.

So for scripts then there are external script tags. For code that is not, there's ordinary AJAX. Why complicate things with document.write()?

[molendijk]

OK John, I misunderstood you. What I mean is this:
Suppose we want to include an external file external.html having text and code. Then if we want to be able to run the code after inclusion, we can do (among other things) the following:
(i) We include external.html (with the help of Ajax or some other method, like a hidden iframe) using innerHTML (and/or appendChild). In that case, we have to use some separate device for including the code belonging to external.html (but see (iii)).
(ii) We entirely transform external.html to a text-string Str and then document.write Str to the main document (I thought you were referring to this in your previous post). In that case, we don't have to separately include the external code belonging to external.html, thanks to document.write.
(iii) We do as in (i), but at the same time we document.write external.html to a hidden div of the main page with the help of Ajax. Using Ajax dispenses us from transforming external.html to a text-string first (see (ii)). The code will run, thanks to document.write.
===
Arie.

[jscheuer1]

When using AJAX (Asynchronous JavaScript and XML), your code must use the asynchronous method, otherwise it's not AJAX. Using the asynchronous method, document.write will probably fail or cause undesirable results.

Regardless of the nature of the request (be it synchronous or asynchronous), using the responseText doesn't dispense with converting the external file to a text string. It is a text string. In other words you have done just that, converted the external file to a text string.

Since you are apparently stuck using a non-AJAX synchronous request, your page will hang if there is a problem (server traffic too high, file not found, etc.). It's somewhat like having an alert on the page and no one ever clicks OK.

Why anyone would prefer this over an external script tag is beyond me.

[molendijk]

When using AJAX (Asynchronous JavaScript and XML), your code must use the asynchronous method, otherwise it's not AJAX.

That's correct. So let's call it Pseudo-Ajax, or Mini-Hercules, or whatever.

Regardless of the nature of the request (be it synchronous or asynchronous), using the responseText doesn't dispense with converting the external file to a text string. It is a text string. In other words you have done just that, converted the external file to a text string.

Correct. But I don't see the problem there. That's exactly why I introduced document.write.

Why anyone would prefer this over an external script tag is beyond me.

Using my script, you don't have to figure out what exactly is the external code you have to explicitly (manually, probably) bring into the main page in order for the external code to automatically work (in the main page). As I see it, that's a clear advantage of my script if the external code is complicated.
===
Arie.

[jscheuer1]

Using my script, you don't have to figure out what exactly is the external code you have to explicitly (manually, probably) bring into the main page in order for the external code to automatically work (in the main page). As I see it, that's a clear advantage of my script if the external code is complicated.

You always have to figure out what the script is. Otherwise you don't know what code it is you are running. If the script is dynamically generated, use the appropriate extension for the script filename. Even then you know what the script code is, just not the specifics that will be passed to it.

Just put the script in an external file and invoke it on the main page with an external script tag. There will be less chance of a server problem or document.write() messing up the rest of the page.