[RESOLVED] AJAX - counting divs with class

**Javaboey** · 10-25-2010 02:41 PM

I want to count the amount of divs on a page with the class of "samplesSection".

HTML
<html>
<head>
<script language="javascript" type="text/javascript" src="js/ajax.js"></script>
<title>Test</title>
</head>
<body>
<div id="navTop" class="navTopGreen"></div>
<div id="category" class="opened" onclick="ajax.getContent(this);">CATEGORY</div>
<div id="industry" class="closed" onclick="ajax.getContent(this);">INDUSTRY</div>
<div id="client" class="closed last" onclick="ajax.getContent(this);">CLIENT</div>

<br />

<div id="samplesGroup">
<div class="samplesSection" title="active">Initial 1</div>
</div>

<p onclick="ajax.count();">Click</p>
</body>
</html>

JAVASCRIPT
var ajax = {

allGroups:new Array(),

count:function() {
j = 0;
var allChildren = document.getElementById("samplesGroup").childNodes;

for (i = 0; i < allChildren.length; i++) {
if (allChildren[i].nodeType == 1)
if (allChildren[i].className.indexOf("samplesSection") >= 0) {
this.allGroups[j] = allChildren[i];
j++;
} //end if
} //end for

alert(this.allGroups.length);
}, //end count

getContent:function(section) {
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("samplesGroup").innerHTML = xmlhttp.responseText;
}
}

xmlhttp.open("POST", "section_" + section.id + ".php",true);
xmlhttp.send();

} //end getContent
} //end ajax

PHP - for category
<?php
echo <<<output
<div class="samplesSection" title="active">
cat 1
</div>
output;
?>

PHP - for industry
<?php
echo <<<output
<div class="samplesSection" title="active">
ind 1
ind 2
</div>
output;
?>

PHP - for client
<?php
echo <<<output
<div class="samplesSection" title="active">
client 1
client 2
client 3
</div>
output;
?>

When you click on "Click", it alerts you with how many divs with class "sampleSections" exist. Here's the problem: When it loads, just click "Click". It alerts 1 - valid. Then click "Category", AJAX refreshes, click "Click" and it alerts 2 - valid again. Click "Client", AJAX refreshes, and click alerts 3 - valid once more. However, whenever I click back on any of the other categories, it always alerts 3. I desperately need help on this. Any advice would be very much appreciated. Here is a live link, so you can test it out:

http://www.brentrichison.com/_underconstruction/test/

Thanks

**Javaboey** · 10-25-2010 02:48 PM

And I've fixed it. If you're curious:

I have to reset the allGroups array each time I click. I didn't realize JavaScript held it in memory.

this.allGroups = new Array();

Thread: [RESOLVED] AJAX - counting divs with class

Thread Tools

Display

[RESOLVED] AJAX - counting divs with class

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions