Copy and Paste JavaScript with an Ajax Engine [con't]
A Place to Put the Content
In the source code of your Web page, at the location where you want the content to be inserted, type something like this:
When the JavaScript Ajax engine retrieves the content (from fileone.html or filetwo.html, in our examples), it will be inserted into that DIV and displayed on the Web page.
The value of the ID in the DIV tag is how the JavaScript is able to find the place to insert the content it retrieves. The value of the ID must be unique in the Web page source code. It doesn't matter what the value of the ID is so long as it begins with a letter, is composed entirely of alphanumeric characters, and is unique.
DIV need not be empty when it is first loaded. Here's an example:
Any content in the DIV will be replaced when the JavaScript retrieves content and puts it into the DIV.
A few more thoughts before I show you how to trigger the JavaScript:
The JavaScript can insert content into places other than DIV tags, provided the tag has a unique ID value. Any HTML tag that can contain Web page content can be used instead. Examples are SPAN, P, PRE, H1, and TD tags.
When you retrieve content to be put into a content tag, it shouldn't contain HTML tags which conflict with the tag where it's being inserted. In other words, if the content is to be put into a SPAN tag, then it shouldn't contain any DIV tags. DIV tags don't belong in SPAN tags. The resulting HTML would not validate.
However, the reverse of the above example is okay. Content to be put into a DIV tag may contain SPAN tags.
To see for yourself, manually paste the content that would be retrieved into the tag where it would be placed. If the resulting source code validates, it's okay. Otherwise, no. To elaborate, when I say "validate," I mean if the source code were scanned by HTML validating software, it would find no errors. It's possible to use source code that doesn't validate properly, but it's important to be aware that even if it works okay in one browser, it might totally misbehave in another.
Links to Trigger the JavaScript
The link which triggers the JavaScript to retrieve the content and insert it into your Web page looks like this:
The link is a call to the JavaScript function ReplaceElementID(). The function requires two parameters, the URL of the content to be retrieved and the ID value of the tag within which to put the content. When the above example link is clicked, the JavaScript retrieves the content from URL /fileone.html and inserts it into the HTML tag with id="AnIdentification".
Note that the URL in the above link is a relative URL. An absolute https://example.com/fileone.html URL might be used in its stead. To easily comply with the Ajax engine JavaScript function restrictions (identical protocol and port are also required, in addition to same domain), with no worries about whether or not you're doing it right, use a relative URL.
Make another link. Use this one to retrieve content from URL /filetwo.html. When you click on the second link, the content in the HTML tag with id="AnIdentification" will change yet again. Every time you click one or the other of the links, the content changes to that which is retrieved by the latest click.
Change the value of function ReplaceElementID()'s ID parameter to insert content into different a place, a different HTML content tag with a unique ID.
The JavaScript Ajax engine is not restricted to static files. Dynamic content can also be retrieved, such as the content of PHP Web pages, for example, and the output of CGI software. If a browser could retrieve the content, so can the JavaScript Ajax engine (provided the content is on the same server). Put the URL to dynamic content in the link for triggering the JavaScript as you would the URL for a static file.
For example, software on your server to retrieve data records might be called with a link like this:
The output of page.php will then be inserted into the HTML tag with id="AnIdentification".
Find a programming school near you