This project has moved and is read-only. For the latest updates, please go here.

Table rows not being rendered

Mar 7, 2014 at 5:41 PM
Does anyone see why the rows aren't being created in the else statement? When the list name changes a new table is created and the first row is added properly but when it is looping through the items in the list the additional rows are not being created. FYI, I did debug this and it is going into the else statement and looping through the items but nothing gets rendered to the page. Code sample below.......

newListName = listName;
liHtml = listName + "<br><table><tr><td>File Name</td><td>File Size</td><td>Last Modified</td></tr><tr><td width='200px'>" + $(this).attr("ows_FileLeafRef") + "</td><td>" + $(this).attr("ows_FileSizeDisplay") + "</td><td>" + $(this).attr("ows_Modified") + "</td></tr>";
liHtml = "<tr><td>" + $(this).attr("ows_FileLeafRef") + "</td><td>" + $(this).attr("ows_FileSizeDisplay") + "</td><td>" + $(this).attr("ows_Modified") + "</td></tr>";

Also, it would great if I could find out how to close off the table after it has looped through all the items in that list so a new table can be opened for the next list in the list collection.
Mar 7, 2014 at 7:52 PM
It looks like you may be rendering a <tr> in the else that isn't enclosed in a <table>. It may be going into the DOM but may just not be visible where you expect.

I'd step through the code and watch what's added into the liHtml variable (it's always funny to see my variable names used in different contexts). My guess is that it's simply invalid HTML.

As for closing things off, I generally start the container before the loop and close it after the loop.

Mar 7, 2014 at 8:12 PM
Edited Mar 7, 2014 at 8:18 PM
Hi Marc,

I am pretty sure that is the problem as well but the issues is that I am C# developer with no experience in jQuery, SPServices or javascript. I wish client side development would just go away but it doesn't seem like that is going to happened. So everything you suggested to do, I have no idea how to do it. Can you provide some more detail or point me in some direction as to where I might find a good developer IDE like Visual Studio to step through this code better?

Or you could just put my code in a Content Editor Web Part and let me know what I am doing wrong :)
Mar 7, 2014 at 8:18 PM
Edited Mar 7, 2014 at 8:37 PM
This code works fine but creates a million tables......

<script language="javascript" type="text/javascript">
var newListName;

//loop through all lists to get the listNames
$(document).ready(function() {
completefunc: function(xData, Status) {
listName = $(this).attr("Title");

//While looping through the lists pass the listName to the GetListItems operation to get details about the list items

operation: "GetListItems",
async: false,
listName: listName,
CAMLViewFields: "<ViewFields>><FieldRef Name='Name'/><FieldRef Name='FileSizeDisplay'/><FieldRef Name='Modified'/></ViewFields>",
CAMLQueryOptions: "<QueryOptions><ViewAttributes Scope='Recursive'/></QueryOptions>",
completefunc: function (xData, Status) {
$(xData.responseXML).SPFilterNode("z:row").each(function() {

var liHtml="";


newListName = listName;

liHtml = listName + "<br><table border='1' id='myTable'><tr><td>File Name</td><td>File Size</td><td>Last Modified</td></tr><tr><td width='200px'>" + $(this).attr("ows_FileLeafRef") + "</td><td>" + $(this).attr("ows_FileSizeDisplay") + "</td><td>" + $(this).attr("ows_Modified") + "</td></tr></table>";
liHtml = "<table border='1'><tr><td>" + $(this).attr("ows_FileLeafRef") + "</td><td>" + $(this).attr("ows_FileSizeDisplay") + "</td><td>" + $(this).attr("ows_Modified") + "</td></tr></table>";



}); // end each
} // end completefunc
}); // end spservices
}); // end each
} // end completefunc
}); // end spservices
}); // end ready function

<div id="myDiv"/>
Mar 8, 2014 at 4:20 AM
"I wish client side development would just go away" might not be the best comment when you are trying to get help on client side coding from a community of folks that may actually like client side coding. :)

Although you may be a C# developer, you have managed to hack together some pieces of code to generate HTML. You are not far off... jQuery .each() is a looping function (similar to C# foreach) and thus if you are generating a <Table> tag inside the loop you are going to get as many tables as there are iterations through the loop.

I think you are trying to loop through all document libraries and then for each one you want to show a table with the list of files along with some file information for each... So your code design (yes, do that too in client side development) would be
  1. initiate the variable that will store the html markup
  2. Get List of Document Libraries.
  3. Loop through each Document library and for each one, do the following (in this order):
    a. Add the name of the list to the variable that is storing the HTML (From Step 1) - example: <h3>list Name</h3>
    b. Add the Table markup and header row to the variable that is holding the html markup (<table><tr><th>column1</th><th>colomn2</th></tr>)
    c. Get a list of all files from this document library
    d. Loop through the list of files and append the rows to the variable holding the html markup (<tr><td>column1 values</td><td>column2 value</td></tr>) to content you generated in step 2.b.
    e. Close the table markup that was started in 2.b (</table>).
  4. When we are all done with looping through all document libraries (#4) and getting all files for each document library (4.d), add the html markup to the page ($("#myDiv").append(something)
Looking at your code, and with this information you should be able to fix it up... remember that in Javascript, variable are scoped only within functions, so you probably want to define your html markup variable at the very top of the program.

Hope this helps... Good luck
Mar 12, 2014 at 7:16 PM
Yes, I am a bit of a loose cannon :)

Please see for answer.
Marked as answer by dan18088 on 3/12/2014 at 11:16 AM