Ajax dynamic articles


Bookmark and Share


This script is distributed under the LGPL open source license.
Commercial licenses are also available. Some of these licenses also includes personal e-mail support for up to 1 year.

Put this into your <HEAD> section

Put this into your <BODY> section

Download Javascript file

I have used the Simple Ajax Code Kit library(SACK) for this script. I have made a copy available for download here.

Put ajax.js in a subfolder called "js" or change the path to the file in the code above(i.e. <script type="text/javascript" src="js/ajax.js"></script>)


This script is a simple demo that hopefully shows you some of the benefits of AJAX.

The list you see on the right side of the demo is a group of articles. The HTML code for this list looks like this:

  <ul id="articleList" class="articleList">
    <li id="article1">This is article number one</li>
    <li id="article2">This is the second article</li>
    <li id="article3">Article number 3</li>
    <li id="article4">About AJAX</li>
    <li id="article5">Article number 5</li>
    <li id="article6">Article number 6</li>
    <li id="article7">Article number 7</li>
    <li id="article8">Article number 8</li>
    <li id="article9">Article number 9</li>

Each <LI> represents an article. I have given each <LI> it's unique ID( Example: <li id="article1">, <li id="article2"). In this example, the id represents the name of external files.

When someone clicks on one of the articles in the list, my script will use AJAX to return the content of a file equal to the ID of the clicked article + ".html". Example: When you click on <LI id="article1">, the script will show you the content of the file "article1.html".

Short about AJAX functions

An "AJAX" Javascript object is created at the top of my script with this line:
var ajax = new sack();

Now, when someone clicks on an article in the list, we configure this object to request the external file. Example:
function getAjaxFile(fileName)
  ajax.requestFile = fileName;
  ajax.onCompletion = showContent;
  ajax.onLoading = showWaitMessage;

  • ajax.requestFile specifies which file to return
  • ajax.onCompletion = showContent; specifies the name of the function that should be executeed when AJAX finish it's job getting the external file
  • ajax.onLoading = showWaitMessage; specifies a function that should be executed while AJAX is working
  • ajax.runAJAX(); executes AJAX

Create external files

I have used 9 dummy articles for this demo. I have just named them article1.html, article2.html ... article9.html. You can download them from this Zip file or create your own articles.


No one has commented this - be first!

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Confirmation code:

Go to cbolson.com

About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2024 dhtmlgoodies.com