) to navigate to next pagePurpose of AHAH
- The purpose of AHAH is to enable an (X)HTML document to dynamically fetch HTML from other documents, thus creating one document that is an assembly of information from many HTML documents.
So Easy!
- It is very easy to do.
- In this tutorial I provide step-by-step instructions.
Step 1
- In your HTML document add this line in the <head> element:
- <script type="text/javascript" src="ahah.js" ></script>
Step 2
- Provide a placeholder in your HTML document where you want the fetched HTML data to be inserted. Identify that placeholder using an id attribute, e.g.,
- <div id="Photo"></div>
- If you want to fetch data from two HTML documents, then you need to provide two placeholders (each with a unique id value). If you want to fetch data from three HTML documents, then you need to provide three placeholders. And so forth.
Step 3
- Create a link to the HTML document that you want fetched. In the link specify that you want the AHAH Javascript invoked to fetch the HTML, and you want the fetched HTML data to be inserted into the placeholder.
- This example shows how to do it: I want Waldorf-Astoria-Photo.html to be fetched and its contents put into the placeholder specified in Step 2 (Photo):
- <a href="javascript:ahah('Waldorf-Astoria-Photo.html','Photo');">photo</a>
Step 4
- Put your HTML document on a Web server (that is connected to the Internet).
- Note: it doesn't work if you try to run your HTML document locally on your file system. You must FTP your HTML document onto a Web site. And the HTML document(s) that you are fetching must also reside on a Web site. Of course, they don't have to reside on the same Web site as your HTML document.
- Also, put ahah.js (the AHAH Javascript file) in the same place that you put your HTML document.
Step 5
- Open a browser and type in the URL to your Web page. When you click on the link it will result in fetching the data in the target HTML document and inserting it into your Web page.
Example
- I have a Web page (Waldorf-Astoria-Factsheet.html) in which I embedded two links: to Waldorf-Astoria-Photo.html and to Waldorf-Astoria-Description.html
- When you click on either link, it results in fetching the data in the HTML document and inserting it into my Web page.
- View Waldorf-Astoria-Factsheet.html in a browser.
- Pretty cool, aye?
HTML "Fragment"
- The target HTML document (the HTML that you are fetching) must not be a whole HTML document; it must just be an HTML fragment.
- View Waldorf-Astoria-Photo.html. View source. It is not a full HTML document. It is only a fragment.
- Remember: when AHAH fetches the target HTML, it fetches the "whole" file, and inserts it in its entirety into your Web page (in the placeholder).
Question for Javascript Whizzes
- In my Waldorf-Astoria example the HTML data is fetched only after the user clicks on the links.
- What Javascript magic do I add so that the HTML data is fetched as soon as the Web page is loaded in the browser?