Dynamic Ajax Content
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.
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.
Step 1: Insert the below script to the HEAD section of your page:
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:
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:
Load absolute URL link:
Here's a different link syntax that references an absolute URL to the file on your server:
Some people have asked how to use a drop down menu instead to select and load a link. You can use the following code:
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:
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.
Syntax of loadobjs()
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.