ajax dynamic content not working with repeat regions.

[lugave]

Hi. I have a new issue. I have created a test page here using the Dynamically loaded articles scripts:



As you can see the only the first level of rows work. Any ideas on how to fix it?

[lugave]

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>

[lugave]

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>