by lugave » Tue Sep 05, 2006 7:21 pm
I'm guessing that the problem is declaring a single Ajax/sack object. How do I change the script below into arrays?
<script type="text/javascript">
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)
{
//alert(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); // 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 = selectArticle;
articles[no].onclick = selectArticle;
}
contentObj = document.getElementById('contentContainer');
}
window.onload = initAjaxDemo;
</script>