dcsimg
www.webdeveloper.com
Results 1 to 2 of 2

Thread: [RESOLVED] AJAX - counting divs with class

  1. #1
    Join Date
    Sep 2008
    Location
    Dallas
    Posts
    154

    resolved [RESOLVED] AJAX - counting divs with class

    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><!--navHeader-->
    <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

  2. #2
    Join Date
    Sep 2008
    Location
    Dallas
    Posts
    154
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles