4

I am using SPServices in Sharepoint 2013 to get some results from cutom list named "navigator" presented here:

enter image description here

and for this purpose I am using code:

<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../js/jquery.SPServices-2014.01.min.js"></script>

<script language="javascript" type="text/javascript">
$(document).ready(function() {
    $().SPServices({
        operation: "GetListItems",
        async: true,
        listName: "navigator",
        CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='URL' /><FieldRef Name='DisplayOrder' /><FieldRef Name='Target' /><FieldRef Name='Category' /></ViewFields>",
        CAMLQuery: "<Query><OrderBy><FieldRef Name='DisplayOrder' Ascending='true' /></OrderBy></Query>",
        completefunc: function (xData, Status) {
            $(xData.responseXML).SPFilterNode("z:row").each(function() {
                var title = ($(this).attr("ows_Title"));
                var href = ($(this).attr("ows_URL")).split(",")[0];
                var target = ($(this).attr("ows_Target"));
                var liHtml = "<li><a href='"+ href +"' target='"+ target +"'>" + title + "</a></li>";
                $("#navigator").append(liHtml);
            });
        }
    });
});
            </script>
            <ul id="navigator" />

I get list of all items like this:

enter image description here

But I would like to achieve something like this:

enter image description here

Is it possible to use "Category" as parent for this elements?

2
  • is only 1 category having 1 list item? Commented Aug 19, 2014 at 8:50
  • This is only example of an idea. Each category will have more items 10 at least. Commented Aug 19, 2014 at 8:52

1 Answer 1

3

So upon your feedback try this one on. The divs will float and it will add a new div based on the category. You need to order items first by category. Then Display order.

$(document).ready(function() {
$().SPServices({
    operation: "GetListItems",
    async: true,
    listName: "navigator",
    CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='URL' /><FieldRef Name='DisplayOrder' /><FieldRef Name='Target' /><FieldRef Name='Category' /></ViewFields>",
    CAMLQuery: "<Query><OrderBy><FieldRef Name="Category" Ascending='true'/><FieldRef Name='DisplayOrder' Ascending='true' /></OrderBy></Query>",
    completefunc: function (xData, Status) {

//Added previous category here
var previouscategory="";

        $(xData.responseXML).SPFilterNode("z:row").each(function() {
            var title = ($(this).attr("ows_Title"));
    // Set current category
    var category = ($(this).attr("Category"));
            var href = ($(this).attr("ows_URL")).split(",")[0];
            var target = ($(this).attr("ows_Target"));

    if(category !=previouscategory)
    {
        $("#navigator").append("<div style='float:left'><h4>"+category+"</h4>");
    }

            var liHtml = "<li><a href='"+ href +"' target='"+ target +"'>" + title + "</a></li>";
            $("#navigator").append(liHtml);

    if(category !=previouscategory)
    {
        $("#navigator").append("</div>);
    }

    previouscategory= category;
        });
    }
});

});

7
  • Thank you for your answer. I tried to use your code and now I don't see any results - blank screen. Should I add div with id="navigator" or any other element? Commented Aug 19, 2014 at 10:35
  • Yes please try with that. I could not try this on mine as I did not have your environment. Logically this code should work. If not, try removing the float. Commented Aug 19, 2014 at 11:10
  • I managed to show some results like this: link by using this code: if(category != previouscategory) { $("#navigator").append("<div style='float:left;'><h1>"+category+"</h1><br> "+liHtml+""); } Now I need to remove duplicate names of categories somehow Commented Aug 19, 2014 at 11:26
  • Thats great. Now you can add more style and make it work better. Also replace h1 tags with lower ones like h3,h4 or some other tags. Commented Aug 19, 2014 at 11:27
  • To remove the duplicates, make sure the category != previous category comes true only when a new category is coming Commented Aug 19, 2014 at 11:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.