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

Styling GetListItems depending on fields within one query

Feb 25, 2011 at 9:45 PM

I am very familiar with using the GetListItems method to return list items which equal a CAML query. Like this below:

completefunc: function (xData, status) {
    $(xData.responseXML).find("[nodeName=z:row]").each(function() {
     var Html = "<li><a href=" +"\""+$(this).attr("ows_Link") +"\"target=\"_blank\"\>"+ $(this).attr("ows_Title")  + "</a></li>";

which outputs this:

  • january blah 1
  • feb blah 2
  • march blah 3
  • etc

My problem is that I have a very lengthy list which needs to be made like this:

  • january blah 1
    • jan suppporting doc for blah 1
  • february blah 2
  • march blah 3
    • march supporting doc
    • march supporting doc

So I set up a field, called "supporting" in my list.  But I realize even with 2 queries that wont work because all my indented items would appear below the top. So then that means we are talking about 24 queries per year. AT that point, with maintenence it may as well stay in HTML format.

Is there any way to get my indents without running a ridiculous amount of queries? Hopefully theres a sumple way that I dont know of.







Feb 25, 2011 at 10:34 PM

Well, it's certainly possible to do this with jQuery if you've got the right data in your list. What you show is simply nested unordered lists.

However, you would probably be better off doing this sort of thing in a DVWP with XSL.

Don't forget that in jQuery 1.5, you HAVE TO HAVE single quotes around the z:row: [nodeName='z:row']. Best get in the habit of doing that now.


Feb 28, 2011 at 4:34 PM
Edited Feb 28, 2011 at 4:38 PM

Thanks Marc,

I'll have to go through my existing code and put in the single quotes. (Running Jquery 1.4).

I can't use a DVWP because these scripts have to be hosted on an IIS server, not the source SP server -   The company default browser settings make sure that there aren't any cross-domain issues. So if that's a requirement that wont work.

Do you have any examples of how you would nest the items within using one query? I have the additional data in my SP list which differentiates the nested items from the regular ones.   

Mar 1, 2011 at 4:59 PM

I am getting closer to a solution but I think that this is a jquery discussion now and not an SP Services discussion so I will post elsewhere. This is what I needed, yet still need to tweak:

var Html = "<li><a href=" +"\"" + $(this).attr("ows_Link") +"\"\>"+ $(this).attr("ows_Title") + "</a></li>";
     $("a:contains('support')").css("margin-left", "10px");

Mar 1, 2011 at 11:51 PM

I'm happy to try to help here if I can.


Mar 2, 2011 at 3:06 PM

I actually got it Marc, and this solution may be handy to other noobs like me who need a little more help. What is really neat is you can add a column in your SharePoint if you know that this list has will be appearing on a HTML page. You make that column called "class." That class then gets pumped out in your z:row loop. Then for Jquery CSS Selectors it will work like a charm:

var Html = "<div class=" +"$(this).attr("ows_Class")" + "><p><a href=" +"\"" + $(this).attr("ows_Link") +"\"\>"+ $(this).attr("ows_Title") + "</a></p></div>";
     $("a:contains('support')").css("font-style", "italic");

There is probably a better way to write it but you can see how injecting the classes in and then parsing them you could quickly style multiple classes depending on the text contained inside them or other factors. This makes both styling and interacting dynamically with class or text filtered selections very exciting.

Mar 4, 2011 at 5:52 PM

Hey, if it works, it works! Glad you got it.