Ajax dynamic articles

Licensing

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

<style type="text/css">
body{
	background-repeat:no-repeat;
	font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
	font-size:0.9em;
	line-height:130%;
	text-align:center;
	height:100%;
	background-color: #E2EBED;
}
#contentContainer h2{	/* No margins above <h2> tags */
	margin-top:0px;
}


#mainContainer{
	width:755px;
	margin:0 auto;
	text-align:left;
	padding:5px;
	margin-top:20px;
	border:1px solid #000;
	background-color: #FFF;
}
#contentContainer{
	float:left;
	border:1px solid #000;
	background-color: #E2EBED;
	overflow:auto;
	margin-right:10px;
	padding:10px;
	
	/* CSS HACK */
	width: 497px;	/* IE 5.x */
	width/* */:/**/480px;	/* Other browsers */
	width: /**/480px;
	
	/* CSS HACK */
	height: 412px;	/* IE 5.x */
	height/* */:/**/390px;	/* Other browsers */
	height: /**/390px;
			
}


#contentContainer .openingText{
	color:red;
}

#articleListContainer{	/* <ul> container for article list */
	float:left;
	height:410px;
	overflow:auto;	
	width:240px;
	border:1px solid #000;
	background-color:#FFF;	
}
.articleList{
	margin:0px;
	padding:2px;
}
.articleList li{	/* General layout article in list */
	list-style-type:none;
	border:1px solid #999;
	background-color:#EEE;
	height:50px;
	margin:1px;
	padding:2px;
	color:#333;
	cursor:pointer;
}
.articleList li.articleMouseOver{	/* Mouse over article in list - layout */
	border:1px solid #000;
	color:#000;
}
.articleList li.articleClick{	/* Active article in list - layout */
	border:1px solid #000;
	color:#000;
	background-color:#317082;
	color:#FFF;
}

.keyText{	/* Just a column I use for key text inside articles - the one with the light blue bg and dotted border */
	background-color:#FFF;
	border:1px dotted #000;
	float:right;
	margin-top:5px;
	margin-left:5px;
	margin-bottom:5px;
	width:150px;
	padding:3px
}
.clear{
	clear:both;
}
</style>
<script type="text/javascript" src="/AJAX/ajax.js"></script>
<script type="text/javascript">
/************************************************************************************************************
Ajax dynamic articles 
Copyright (C) 2006  DTHMLGoodies.com, Alf Magne Kalleland

This library is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License as published by the Free Software Foundation; either
version 2.1 of the License, or (at your option) any later version.

This library is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
Lesser General Public License for more details.

You should have received a copy of the GNU Lesser General Public
License along with this library; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA

Dhtmlgoodies.com., hereby disclaims all copyright interest in this script
written by Alf Magne Kalleland.

Alf Magne Kalleland, 2006
Owner of DHTMLgoodies.com


************************************************************************************************************/	
var ajax = new sack();
var articleListObj;
var activeArticle = false;
var clickedArticle = false;
var contentObj	// Reference to article content <div>

function mouseoverArticle()	// Highlight article
{
	if(this==clickedArticle)return;
	if(activeArticle && activeArticle!=this){
		if(activeArticle==clickedArticle)
			activeArticle.className='articleClick';
		else
			activeArticle.className='';
		
	}
	this.className='articleMouseOver';
	activeArticle = this;	// Storing reference to this article
}

function showContent()	// Displaying content in the content <div>
{
	contentObj.innerHTML = ajax.response;	// ajax.response is a variable that contains the content of the external file	
}

function showWaitMessage()
{
	contentObj.innerHTML = 'Finding article.....<br>Please wait';
}
function getAjaxFile(fileName)
{
	ajax.requestFile = fileName;	// Specifying which file to get
	ajax.onCompletion = showContent;	// Specify function that will be executed after file has been found
	ajax.onLoading = showWaitMessage;	// Action when AJAX is loading the file
	ajax.runAJAX();		// Execute AJAX function	
}

function selectArticle()	// User have clicked on an article
{
	getAjaxFile(this.id + '.html');	// Calling the getAjasFile function. argument to the function is id of this <li> + '.html', example "article1.html"
	if(clickedArticle && clickedArticle!=this)clickedArticle.className='articleMouseOver';
	this.className='articleClick';
	clickedArticle = this;
}


function initAjaxDemo()
{
	articleListObj = document.getElementById('articleList');
	var articles = articleListObj.getElementsByTagName('LI');
	for(var no=0;no<articles.length;no++){
		articles[no].onmouseover = mouseoverArticle;
		articles[no].onclick = selectArticle;
	}	
	
	contentObj = document.getElementById('contentContainer');
}
window.onload = initAjaxDemo;
</script>

Put this into your <BODY> section

<div id="mainContainer">
	<div id="header">
		<img src="/images/heading3.gif">
	</div>
	<div id="contentContainer">
		<h2 class="openingText">Click on one of the articles to the right.</h2>
		<p>This will load the the content of external articles into this DIV</p>
	</div>
	<div id="articleListContainer">
		<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>
		</ul>
	</div>
	<div class="clear"></div>
</div>

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>)

Configuration

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>
  </ul>

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.runAJAX();
}

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.

Comments

This is awesome, Thanks for sharing your cool ideas.

Don at 05:29PM, 2011/03/01.

I*m impressed, it*s cool script, but for me
it doesn*t work, as I don*t know in what folder to put articles files. Where ever I put them it only doesn*t work. Maybe some help?

Antun at 09:45PM, 2011/03/01.

I have the same problem as ANTUN :(

Aaron at 11:35PM, 2011/03/08.

can someone please provide the answer?
ASAP

Aaron at 12:09AM, 2011/03/09.

Admin comment

The files should be in the same folder as the main html file.

If you're still not able to make it work, please take a look a this article: http://www.dhtmlgoodies.com/forum/viewtopic.php?f=30&t=568

DHTMLGoodies at 01:17PM, 2011/03/09.

Thanks alot mate, I managed to use something else on your site.
Great stuff.
:)

Aaron at 04:17AM, 2011/03/13.

hi how to make auto star "article1"
Thanks

alan at 05:05AM, 2011/04/11.

Ishraga.M.Allam at 11:42AM, 2011/05/30.

Nice script, thanks. Took me a little while to get it working but once I found out why it wasn't it was great, which is more than I can say for the other similar scripts I found online. Now I just have to tweak the settings to get it to match the rest of my site. :)

A couple of things:
script type="text/javascript" src="/AJAX/ajax.js"

This contradicts what you write in the text about placing the ajax.js script into a directory named js. You also have a leading /. Once I changed this line to src="js/ajax.js" it worked fine.

I also have problems with scripts like this that use standard tags such as body and header that will almost certainly be already used on websites. Might just be me, but I think that scripts should keep their tags unique, jdabody and jdaheader for instance in this case.

Minor quibbles though. Thanks again.

Dave at 01:09PM, 2011/06/23.

thanks ISHRAGA, you're rigth

ibrahim at 06:48PM, 2011/07/05.

sorry, i mean thanks dave you're right, the code must be script type="text/javascript" src="js/ajax.js not
script type="text/javascript" src="/AJAX/ajax.js

ibrahim at 06:50PM, 2011/07/05.

hello, the script looks prety good, but can i show an URL instead of a simple html ?
how ?

thanks

Marcos at 06:03AM, 2011/08/07.

how do i autostart an article? please help

alex at 02:51PM, 2011/08/18.

hello ???????

Marcos at 09:36PM, 2011/08/23.

Admin comment

Marcos,

Unfortunately, Ajax does not support loading of external URL's if that's what you ask for. If you want to support loading of external url's via ajax, you need to implement some sort of server side routine which fetch the page from the remote server and sends the content from your server to the browser.

Alex,

If you change the selectArticle function to the code below, you can add this at the bottom of your html page:

<script type="text/javascript">
selectArticle('article1.html');
</script>

............
function selectArticle(article) // User have clicked on an article
{
if(!article){
article = this.id + '.html';
}
getAjaxFile(article ); // Calling the getAjasFile function. argument to the function is id of this <li> + '.html', example "article1.html"
if(clickedArticle && clickedArticle!=this)clickedArticle.className='articleMouseOver';
this.className='articleClick';
clickedArticle = this;
}

DHTMLGoodies at 01:10PM, 2011/08/24.

Hi alex
Thanks for your help.
I wish to display an url from my own site.
I work with tomcat and java. And wish to call a Url like "http://myownserver:8080/servletapp/objectclass?parameterlist"

Maybe seeing your example in getajaxfile function i can modify something to do what i expect.
Thanks again and sorry for my bad english
Regards.

Marcos

Marcos at 03:47AM, 2011/08/27.

Hello !
I need to use checkbox and radio buttons for this form but it don't works...!
How could I do ?

Thanks

Pierre at 04:06PM, 2011/09/09.

Hi,

Thanks for the nice script. But, for some reason its not working from my desktop. The articles are not loading. Even when I load through the Web Matrix (server software) its the same issue. Do I need to change anything in the script - can anybody please guide.

Thanks,

Prem

prem aman at 05:50AM, 2011/10/07.

uyuyu at 03:47PM, 2011/12/25.

Hi,

Thanks for your script. I managed to get it working in a wordpress environment which is great. so i dynamically open a php of a post.

What I want now is preloading of articles.

Do you have an idea how to do this?

Jorrit at 06:35PM, 2012/01/26.

Hi first of all fantastic site, I love you man! (in a heterosexual way).

Aaaanyway yeah I want to add a lot of articles, how easy would it be to have them all within a subfolder? What would I need to change in the code? Any help is much appreciated!

Luke at 03:09PM, 2012/04/26.

^ignore that, I got it.

change

getAjaxFile(this.id + '.html');

to

getAjaxFile('nameoffolder/' + this.id + '.html');

and put the files in a subfolder (in this case called nameoffolder but rename it whatever you want)

Luke at 03:58PM, 2012/04/26.

This doesnt work. The articles will not load. I have put them in the same directory as the index file and it just says "finding article"

Doug at 07:05PM, 2012/05/21.

Really useful article.
I have shortened out the ajax.js and it works fine. Can u explain ajax.js in detail.

thanks
Ravi Bhadauria
Admec multimedia institute

Ravi at 09:51AM, 2012/08/11.