FF1+ IE5+ Opr8+

Dynamic Ajax Content

Author: Dynamic Drive

Note: Updated Dec 14th, 05' with instructions on using a SELECT menu to load the links.

Description: This script uses Ajax to enable you to load external pages into a DIV without having to reload the browser or use IFRAMES. If your external pages reference any external .css or .js files for styling, this script can also load and apply them to the page on demand.

Note: Due to security limitations, the external pages loaded must be from the same domain as the encompassing page. Any external .css and .js files associated with these pages, however, can be from any domain.

Demo (Load an external page or style/javascript file associated with them) Download demo.:

Choose a page to load.

The "Forum Archives" link illustrates how you're not limited to just loading html pages, but also dynamically generated pages (ie: php). The last link shows how you can invoke external .css and .js files on demand to the page, such as when loading an external page, to style and provide functionality to it.


Directions Developer's View

Step 1: Insert the below script to the HEAD section of your page:

Select All

Step 2: Once that's done, simply create links that will load an external page into the desired DIV or container using one of the below syntax:

Normal link:

<a href="javascript:ajaxpage('test.htm', 'rightcolumn');">test</a>
<div id="contentarea"></div>

In the above case, "test.htm" is the file on your server that you want to load, and "rightcolumn", the ID of the container that this content will be loaded into. You can even load an external page without requiring the click of a link, by calling the function directly:

<script type="text/javascript">
ajaxpage('test.htm', 'rightcolumn') //load "test.htm" into "rightcolumn" DIV
</script>

Load absolute URL link:

Here's a different link syntax that references an absolute URL to the file on your server:

<a href="javascript:ajaxpage(rootdomain+'/mydir/index.htm', 'contentarea');">test</a>
<div id="contentarea"></div>
This will load "http://www.mydomain.com/mydir/index.htm". Here the important thing to note is the "rootdomain" variable. Instead of specifying literally the domain of your server, such as "http://www.mydomain.com", you should instead use "rootdomain" and let the script dynamically determine this domain. The reason for this is due to the two possible ways your domain can be entered, either with or without the "www" prefix. This variation creates a problem in that if you hard coded your domain inside the link using one version ("http://www") and the user is viewing your site using the other ("http://"), to Ajax, the two domains don't match, triggering the security limitation mentioned above, and the file is not loaded for that user. The "rootdomain" variable takes care of this by dynamically determining your current domain name as the user is using inside his/her browser to construct a full URL to the file to load.

Using a drop down menu to load the links

Some people have asked how to use a drop down menu instead to select and load a link. You can use the following code:

<script type="text/javascript">
/***Combo Menu Load Ajax snippet**/
function ajaxcombo(selectobjID, loadarea){
var selectobj=document.getElementById? document.getElementById(selectobjID) : ""
if (selectobj!="" && selectobj.options[selectobj.selectedIndex].value!="")
ajaxpage(selectobj.options[selectobj.selectedIndex].value, loadarea)
}
</script>

<form>
<select id="ajaxmenu" size="1">
<option value="page1.htm">Page 1</option>
<option value="page2.htm">Page 2</option>
<option value="subdirectory/page3.htm">Page 3</option>
</select>
<input type="button" onClick="ajaxcombo('ajaxmenu', 'contentarea')" value="Go" />
</form>

<div id="contentarea"></div>

where "ajaxmenu" is the ID of the <select> menu used for this purpose, and "page1.htm", "page2.htm" etc are the relative paths to the files to load (NON absolute URLs).

If you need the drop down menu to load absolute URLs on your site, just modify the "ajaxpage()" function in the above code to:

ajaxpage(rootdomain+"/"+selectobj.options[selectobj.selectedIndex].value, loadarea)

Finally, and if that wasn't enough, if you wish the drop down menu to load a file simply by selecting it from the menu (versus clicking on the "Go" button, change the entire form above to:

<form>
<select id="ajaxmenu" size="1" onChange="ajaxcombo('ajaxmenu', 'contentarea')">
<option value="">Select A file to load</option>
<option value="page1.htm">Page 1</option>
<option value="page2.htm">Page 2</option>
<option value="subdirectory/page3.htm">Page 3</option>
</select>
</form>

Notice how the first <option> has a value of blank (""), which informs the script not to load any file for that option.

Load page and external CSS /JavaScript link:

If you wish to style your external pages using CSS or JavaScript, you should NOT insert them directly inside the external page. Rather, save them as external files (.css and .js), and let the script apply them dynamically when the external page is loaded using function "loadobjs()". Here's an example:

<a href="javascript:ajaxpage('test.htm', 'contentarea'); loadobjs('external.css', 'feature.js')">test</a>
<div id="contentarea"></div>

The above link not only loads "test.htm" into a DIV, but also applies "external.css" and "feature.js" to the page at the same time, which presumably should contain code that targets specifically the HTML inside "test.htm".

Syntax of loadobjs()

Note that function loadobjs() can invoke any number of CSS and external JavaScript files that you need. For example:

loadobjs('external.css') //load one CSS file
loadobjs('external.css', 'external2.css', 'feature.js') //load 2 CSS files & 1 JS file
loadobjs('feature.js', 'feature2.js', 'feature3.js') //load 3 JS files

Also, this function will remember when a CSS or JS file has already been loaded and applied to the page, and won't load the same file again even if the link that invokes it is clicked on multiple times. This is for sake of efficiency.

Well, that's a wrap for now! For your reference, you can download all the files that make up the above demo.

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post