Count list items by title to view as a table.

Feb 10, 2015 at 7:54 PM
Hi,

I've been using spservices to iterate through a list and count all entries with a specific title. I think I've sorted that, the issue I have is printing that count out to a table that I can use throughout a web page.
<script language="javascript" type="text/javascript">

var qA = "<Query>" + "
<Where>" + "<Eq>" + "
<FieldRef Name='Qualification_x0020_Name'/>
<Value Type='Text'> Qualified " +  "</Eq>" + "</Where>" + "</Query>";


$().SPServices({
operation: "GetListItems",
async: false,
webURL: "#",
listName: "Subjects",
CAMLQuery: qA,  
completefunc: function(xData, Status) {
        itemCountA = $(xData.responseXML).SPFilterNode("rs:data").attr("ItemCount");

var trowA = "<tr><td>" + itemCountA + "</td></tr>";                                

$(".trowA").append(trowA);
        }
       });

</script>
<table id="Quals" border=0 width=665 height=156>
<tbody>
<tr>
<td>
<H4>Quals</H4></td></tr>
<tr class=trowA></tr></tbody></table>
The above code works and prints out the count when I use a document write, but for the life of me I cannot get it to print the count as a number in the table. I'm sure I've just messed something up somewhere and this is an easy fix. Help please? Thanks in advance.
Coordinator
Feb 11, 2015 at 1:30 PM
You're appending a tr into a tr, so you're generating invalid markup in the DOM. The value is probably there but not visible.

Try this:
<script language="javascript" type="text/javascript">

  var qA = "<Query>" + "
    <Where>" + "<Eq>" + "
    <FieldRef Name='Qualification_x0020_Name'/>
    <Value Type='Text'> Qualified " +  "</Eq>" + "</Where>" + "</Query>";


  $().SPServices({
    operation: "GetListItems",
    async: false,
    webURL: "#",
    listName: "Subjects",
    CAMLQuery: qA,  
    completefunc: function(xData, Status) {

      var itemCountA = $(xData.responseXML).SPFilterNode("rs:data").attr("ItemCount");
      $(".trowA td:first").text(itemCountA);
    }
  });

</script>
<table id="Quals" border=0 width=665 height=156>
  <tbody>
    <tr>
      <td>
        <H4>Quals</H4>
      </td>
    </tr>
    <tr class=trowA>
      <td></td>
    </tr>
  </tbody>
</table>

Feb 16, 2015 at 9:09 AM
Thanks for the response! I've copied and pasted the amended code but still nothing unfortunately. If i document.write(itemCountA) i can get the value but it won't print out as normal HTML into the table. No idea where i'm going wrong. Thanks again for the help though.
Coordinator
Feb 16, 2015 at 1:34 PM
I don't see anything obvious the would prevent it from working. If itemCountA gets the right value, then you're almost there.

M.
Feb 20, 2015 at 12:30 PM
Edited Feb 20, 2015 at 12:36 PM
What if you change...
$(".trowA td:first").text(itemCountA);
to...
$(".trowA > td").first().text(itemCountA);
It's just another way to traverse the DOM with jQuery.

Geoff
Feb 24, 2015 at 3:04 PM
That's also a faster way to get the first td as well Geoff. I think ultimately, the code is missing a jQuery("document").ready function call.
If you use the length property, you'll know if the selector is working properly.

$(".trowA > td").first().length

I use this all the time while debugging and it's very helpful.

Cheers,
Matthew
Coordinator
Feb 24, 2015 at 3:51 PM
Usually if you're stuffing your own markup into the page, you won't need the $(document).ready(), Matt, but there are always exceptions. Timing...





...issues bite everyone, including me!

M.
Feb 24, 2015 at 6:03 PM
I've come across that one many times... It's easy to overlook. :)

When adding the HTML to the page, I've found that if the script block is before the HTML, the inconsistency of this working and not working crops up. If the HTML appears before the script tag, this usually works just fine. I still opt for the $(document).ready in most cases however.

I set up a small fiddle to demonstrate:
http://jsfiddle.net/hh5s7zr5/

Just take script and put them below the div tag. The div is updated when the script appears afterwards. I still like the $(document).ready for explicitness though.

Cheers,
Matthew