SPServices with Sharepoint and Divs

Question

I'm using Sharepoint Design with the code below inserted in content webpart.

The code lists files and folders with SPServices of a library and shows a PDF if a link was clicked. In my library PDFLibrary, I have some folders, and each folder has some files inside. The code works well, but my problem now is how do I show these menus with an accordion effect?

I purposely generated the folder names between h3 tags, but I need a delimiter on each link groups:

h3 PDF Folder1 /h3
div
  link file1
  link file2
  link file3
/div

In this way, in my code, when I try to insert a div before the links, the browser immediately closes it:

h3 PDF Folder1 /h3
div /div (<= HERE IS WRONG!)
link file1
link file2
link file3

The solution I found is to insert another webpart with the accordion code after the page is fully loaded, but this is not ideal.

Is a dynamically inserted div not possible?

Here is my code:

<script type="text/javascript" src="/Scripts/pdfobject.js"></script>
<script language="javascript" type="text/javascript">
  $(document).ready(function () {

    // var to generate ids for each element of list
    var _id = 1;

    $().SPServices({
      operation:  "GetListItems",
      listName: "PDFLibrary",

      completefunc: function (xData, Status) {          

        $(xData.responseXML).find("z\\:row, row").each(function() {
          //take the type of object. 1 = folder / 0 = file
          var thisFSObjType = $(this).attr("ows_FSObjType").split(";#")[1];

          if(thisFSObjType == 1) {
            //mount the string to get the current folder
            var _initialString = "<QueryOptions><Folder>PDFLibrary/";   
            var _folderName = $(this).attr("ows_LinkFilename");                 
            var _finalString = "</Folder></QueryOptions>"

            var _CAMLQueryString = _initialString + _folderName + _finalString;

            //print the current folder on div
            $("#pdflist").append(_folderName).append("<br/>");           


            //this function lists the files inside the current folder
            $().SPServices({
              operation: "GetListItems",
              async: false,
              listName: "PDFLibrary",

              CAMLQueryOptions: _CAMLQueryString,                           

              completefunc: function (xData, Status) {
                $(xData.responseXML).find("z\\:row, row").each(function () {
                  var _url = 'http://mysite.org/' + $(this).attr("ows_FileRef").split(";#")[1];
                  var _title = $(this).attr("ows_LinkFilename");                                               
                  var _link = $("<a  href='" + _url + "'" + "id='" +_id + "'" + "/>");

                  $(_link).append(_title);
                  $("#pdflist").append(_link).append("<br/>");

                  // set id to current file
                  var idpdf = "#" + _id;

                  // load file into pdfview div
                  $(idpdf).click(function(event){
                    event.preventDefault();

                    var myPDF = new PDFObject({ 

                      url: $(this).attr('href'),
                        pdfOpenParams: {
                          navpanes: 1,
                        view: "FitV",
                        pagemode: "thumbs"
                        }

                    }).embed("pdfview");

                  });
                  _id = _id + 1;                         
                });
                $("#pdflist").append("<br/>"); 
              }

            });
          }
        });

      }
    }); 
  });  
</script>

Answer 1

You may want to check my API to deal with Sharepoint: SharepointPlus, and especially the $SP().list().get() with the folderOptions. It will make your code way simplier :-)

Regarding your question, it's not really clear. When you said "the browser immediately closes it", what is closed? You can, of course, add a DIV in your DOM with no problem.

However, here, the thing you want to achieve seems to be only visual. It means you could use CSS to do it, couldn't you?

I guess we miss too many things in the code you provided to help you. I don't see anywhere the inserted H3. What is #pdflist? Where in your code are you trying to insert the DIV? How looks like your HTML code before and after?

Also you can refactor the below code:

var _link = $("<a  href='" + _url + "'" + "id='" +_id + "'" + "/>");
$(_link).append(_title);
$("#pdflist").append(_link).append("<br/>");

To:

$("#pdflist").append('<a href="'+_url+'" id="'+_id+'">'+_title+'</a><br>');

Sorry but it's difficult to help with this amount of information.

Answer 2

I'm assuming #pdflist is your container DIV tag for all of the folders in the main loop...but I don't see you inserting DIVs anywhere else in the code for each individual folder instance in the loop...

Why not just generate a DIV object along with your links outside of the sub-loop?

//print the current folder on div
$("#pdflist").append(_folderName).append("<br/>");  

//** CREATE SUB-CONTAINER DIV FOR THIS FOLDER **
var _container = $("<div class="folderList" id='someID' />"); 

//this function lists the files inside the current folder
$().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "PDFLibrary", 
    CAMLQueryOptions: _CAMLQueryString,                           

    completefunc: function (xData, Status) {
        $(xData.responseXML).find("z\\:row, row").each(function () {
            var _url = 'http://mysite.org/' + $(this).attr("ows_FileRef").split(";#")[1];
            var _title = $(this).attr("ows_LinkFilename");              
            var _link = $("<a  href='" + _url + "'" + "id='" +_id + "'" + "/>");

            $(_link).append(_title);
            $(_container).append(_link); //** APPEND LINK TO DIV **
            $("#pdflist").append(_container).append("<br/>"); // ** APPEND DIV TO MAIN CONTAINER **
            ... etc ...

Another option is just to generate your HTML output in a concatenated string and then inject it into your container element.