SPServices с Sharepoint и Divs

Question

Я использую Sharepoint Design с кодом ниже, вставленным в веб-часть контента.

Код перечисляет файлы и папки с SPServices библиотеки и показывает PDF, если ссылка была нажата. В моей библиотеке PDFLibraryУ меня есть несколько папок, и каждая папка имеет несколько файлов внутри. Код работает хорошо, но моя проблема сейчас в том, как мне показать эти меню с эффектом аккордеона?

Я специально сгенерировал имена папок между тегами h3, но мне нужен разделитель для каждой группы ссылок:

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

Таким образом, в моем коде, когда я пытаюсь вставить div перед ссылками, браузер немедленно закрывает его:

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

Решение, которое я нашел, состоит в том, чтобы вставить другую веб-часть с кодом аккордеона после полной загрузки страницы, но это не идеально.

Динамически вставленный div не возможен?

Вот мой код:

<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

Я предполагаю, что #pdflist - это твой тег DIV контейнера для всех папок в основном цикле... но я не вижу, чтобы ты вставлял DIVs где-нибудь еще в коде для каждого отдельного экземпляра папки в цикле...

Почему бы просто не сгенерировать объект DIV вместе с вашими ссылками за пределами суб-цикла?

//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 ...

Другой вариант - просто сгенерировать вывод HTML в виде объединенной строки, а затем внедрить его в элемент контейнера.

Answer 2

Вы можете проверить мой API для работы с Sharepoint: SharepointPlus, особенно с $SP(). List(). Get() с folderOptions, Это сделает ваш код проще:-)

Что касается вашего вопроса, это не очень понятно. Когда вы сказали, что "браузер немедленно закрывает его", что закрывается? Конечно, вы можете без проблем добавить DIV в DOM.

Однако здесь то, чего вы хотите достичь, кажется только визуальным. Это значит, что вы можете использовать CSS для этого, не так ли?

Я предполагаю, что мы пропустили слишком много вещей в коде, который вы предоставили, чтобы помочь вам. Я не вижу нигде вставленного H3, Что такое #pdflist? Где в вашем коде вы пытаетесь вставить DIV? Как выглядит ваш HTML-код до и после?

Также вы можете изменить код ниже:

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

Для того, чтобы:

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

Извините, но трудно помочь с таким количеством информации.