- Menu scripts
- Window scripts
- Calendar scripts
- Gallery scripts
- Form widgets
- Tab view scripts
- Table widgets
- Drag and drop
- Folder trees
- AJAX scripts
- Content Effects
- Misc scripts
- Chess widgets
- DHTML Suite
New on DHTMLGoodies.com:
DHTML Chess Wordpress Plugin (Beta) . Participate in the beta testing of the DHTML Chess for WordPress plugin, and receive a free Commercial License worth USD99.
Ajax dynamic articles
Put this into your <HEAD> section
Put this into your <BODY> section
I have used the Simple Ajax Code Kit library(SACK) for this script. I have made a copy available for download here.
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
var ajax = new sack();
Now, when someone clicks on an article in the list, we configure this object to request the external file. Example:
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.