2

I am trying to achieve something like this:
enter image description here
Each list item have attachments (at least 1).

For now I have code which display all attachments with titles but I don't know how to modify this code to get desired result. This is what I get:
enter image description here

$(document).ready(function() {
    $().SPServices({
        operation: "GetListItems",
        async: false,
        listName: "Repozytorium",
        /*CAMLViewFields: "<ViewFields><FieldRef Name='Title' /></ViewFields>",*/
        completefunc: function (xData, Status) {

            var output = "";
            $(xData.responseXML).SPFilterNode("z:row").each(function() {
                var id = $(this).attr("ows_ID");
                var title = $(this).attr("ows_Title");
                $().SPServices({
                    async: false,
                    operation: "GetAttachmentCollection",
                    listName: "Repozytorium",
                    ID: id,
                    completefunc: function(xData, Status) {
                        $(xData.responseXML).find("Attachments > Attachment").each(function(i, el) {
                            var $node = $(this),
                                    filePath = $node.text(),
                                    arrString = filePath.split("/"),
                                    fileName = arrString[arrString.length - 1];


                            var liHtml = "<li><a href='"+ filePath +"' target='_blank'>" + fileName + "</a></li>";
                            //output += "<a href='" + filePath + "' target='_blank'>" + fileName + "</a><br />";
                            $("#drop-zone").append(liHtml);
                        });

                    }
                });

            });

            //$("#drop-zone").html(output);
        }
    });
});

It is simple I know but my knowledge of jquery is limited :(

1

Try this code:

    $(document).ready(function() {
    $().SPServices({
        operation: "GetListItems",
        async: false,
        listName: "State",
        /*CAMLViewFields: "<ViewFields><FieldRef Name='Title' /></ViewFields>",*/
        completefunc: function (xData, Status) {

            var output = "";

            $(xData.responseXML).SPFilterNode("z:row").each(function() {
                var id = $(this).attr("ows_ID");
                var title = $(this).attr("ows_Title");
                var liHtml = "<div style='width:150px; position:relative; float:left;'><h5>"+title+"</h5>";
                $().SPServices({
                    async: false,
                    operation: "GetAttachmentCollection",
                    listName: "State",
                    ID: id,
                    completefunc: function(xData, Status) {
                        liHtml += "<ul style='list-style: none; width:140px; padding-left:5px;'>"; 
                        $(xData.responseXML).find("Attachments > Attachment").each(function(i, el) {
                            var $node = $(this),
                                    filePath = $node.text(),
                                    arrString = filePath.split("/"),
                                    fileName = arrString[arrString.length - 1];


                            liHtml += "<li><a href='"+ filePath +"' target='_blank'>" + fileName + "</a></li>";
                            //output += "<a href='" + filePath + "' target='_blank'>" + fileName + "</a><br />";

                        });
                        liHtml += "</ul></div>";


                    }
                });
                $("#drop-zone").append(liHtml);
            });

            //$("#drop-zone").html(output);
        }
    });
});
  • try updated it is perfectly match with your requirement. – Dikesh Gandhi Jun 7 '16 at 10:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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