到SPservices的JavaScript图库

Question

我找到了很好的JavaScript画廊here。我正在尝试使用SPServices从Sharepoint库中获取数据。但没起作用。我的代码有什么问题吗？

​

<script type="text/javascript" src="/Jscript/Jquery/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="/Jscript/SPServices/jquery.SPServices-2014.02.min.js"></script>
<script type="text/javascript" src="/Script/js/fotorama.js"></script>
<link rel="stylesheet" href="/Script/js/fotorama.css" />


<script language="javascript" type="text/javascript">

$(document).ready(function() {
  $().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "2007PhotoAlbum",
    CAMLViewFields: "<ViewFields></ViewFields>",
    completefunc: function (xData, Status) {
      $(xData.responseXML).SPFilterNode("z:row").each(function() {
	  
		
        var liHtml = "<div class='fotorama'><img src='" + "/photos/2007PhotoAlbum/" + $(this).attr("ows_PicFilename") +"'" + "></div>";
        $("#fotorama").append(liHtml);
      });
    }
  });
});


</script>
<div id="fotorama" data-width="700" data-ratio="700/467" data-max-width="100%"></div>
<script>
$('.fotorama').fotorama({
  width: 700,
  maxwidth: '100%',
  ratio: 16/9,
  allowfullscreen: true,
  nav: 'thumbs'
});
</script>

​

Answer 1

在运行图库代码之前，SPServices调用可能不会完成。这使得SPServices看起来没有返回任何数据。您可以从检查SPServices是否返回数据开始。这段代码将把输出写入页面。

$().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "2007PhotoAlbum",
    CAMLViewFields: "<ViewFields></ViewFields>",
    completefunc: function(xData, Status) {
        /***********************************Debugging*******************************/
            var out = $().SPServices.SPDebugXMLHttpResult({
            node: xData.responseXML
            });
            $("#debug").html("").append("<b>This is the output from the GetList operation:</b>" + out);
        /***************************************************************************/

      $(xData.responseXML).SPFilterNode("z:row").each(function() {


        var liHtml = "<div class='fotorama'><img src='" + "/photos/2007PhotoAlbum/" + $(this).attr("ows_PicFilename") +"'" + "></div>";
        $("#fotorama").append(liHtml);
      });
    }
  });

只要它返回数据，我建议您使用promises重写SPServices调用。然后在返回promise后运行.fotorama。Marc比较了使用和不使用promises here的情况。