Код подключаемого модуля JQuery с SharePoint

Question

Я пытаюсь реплицировать эту функциональность в SharePoint 2010. Я добавил веб-часть «Редактор контента» и изменил исходный HTML-код.Однако я не получаю желаемого результата, чего-то не хватает в коде.Мой вывод выглядит примерно так:

Вот мой код,

    <IMG ID="slideshowPicturePlaceholder" src="/_layouts/images/GEARS_AN.GIF" style="display:none"/>
<center><div id="slideshowContentArea" style="display:none">&nbsp;</div></center>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>

<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script>


<script>
 function GetAllImages() 
{
$("#slideshowPicturePlaceholder").css("display", "block");    
var soapEnv = "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'><soapenv:Body><GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'>";
    //The name of the image library is called 'SlideShow'. Replace the name bewlo with the name of your image library
 soapEnv += "<listName>SlideShow</listName>";
    soapEnv += "<query><Query><OrderBy Override='TRUE'><FieldRef Name='Created' Ascending='FALSE' /></OrderBy></Query></query>";
    soapEnv += "<viewFields><ViewFields><FieldRef Name='Title'/><FieldRef Name='ows_FileLeafRef'/></ViewFields></viewFields><rowLimit></rowLimit>";
    soapEnv += "</GetListItems></soapenv:Body></soapenv:Envelope>";

var port = window.location.port;
if (port.length <= 0)
 port = "";
else
 port = ":"+port;
var webservice = window.location.protocol+"//"+window.location.hostname+port+L_Menu_BaseUrl+"/_vti_bin/lists.asmx";

    $.ajax({
        url: webservice,
        type: "POST",
        dataType: "xml",
        data: soapEnv,
        complete: processQueryResults,
        contentType: "text/xml; charset=utf-8",
         error: function(xhr) {
        alert('Error!  Status = ' + xhr.status);}
    });
}

function processQueryResults(xData, status)
{
var port = window.location.port;
if (port.length <= 0)
 port = "";
else
 port = ":"+port;
//Change the below to point to your image library
var imageURL = window.location.protocol+"//"+window.location.hostname+port+L_Menu_BaseUrl+"/SlideShow/";
var itemURL = window.location.protocol+"//"+window.location.hostname+port+L_Menu_BaseUrl+"/SlideShow/Forms/DispForm.aspx?ID=";

$("#slideshowContentArea").html("")
$("#slideshowContentArea").html("<table cellspacing='20'><tr><td>")
$("#slideshowContentArea").html("<div class='nav'><a id='prev href='#'>Prev</a><a id='next' href='#'>Next</a></div>")


$(xData.responseXML).find("z\\:row").each(function() {
  var title = $(this).attr("ows_Title");
  var imageLink = imageURL+$(this).attr("ows_FileLeafRef").substring($(this).attr("ows_FileLeafRef").indexOf('#')+1);
  var itemLink = itemURL+$(this).attr("ows_ID");
  var Html ="<div style='padding: 10px;border:1px solid #ccc;background-color:#eee;width:270px;height: 270px;top:0;left: 0;'><a target='_blank' border='0' href='"+itemLink+"'><img width='250' height='250'  src='"+ imageLink +"'/></a><p align='center'></p></div><pre><code>$('#slideshow').cycle({fx:'scrollHorz',prev:'#prev',next:'#next',after:onAfter,timeout:0});

"; $ (" # slideshowContentArea ") .append (Html);}); $ ("# slideshowPicturePlaceholder"). css ("display", "none"); $ ("# slideshowContentArea"). css ("display", "block");} GetAllImages();

Куда я скучаю?

Answer 1

Также обратите внимание, что строка с методом find("z\\:row") не будет работать в браузерах Safari и Chrome.Вы должны изменить его на:

$(xData.responseXML).find("[nodeName=z:row]").each(function() {

Надеюсь, это кому-нибудь поможет;нам потребовалось некоторое время, чтобы разобраться с этим!

Answer 2

Попробуйте это:

<IMG ID="slideshowPicturePlaceholder" src="/_layouts/images/GEARS_AN.GIF" style="display:none"/>
<center><div id="slideshowContentArea" style="display:none; width:255px;">
    <div class='nav'><a id='prev' href='#'>Prev</a><a id='next' href='#'>Next</a></div>
    <div id="slideshow" class="pics" style="position: relative; overflow-x: hidden; overflow-y: hidden; height:255px; width:255px">&nbsp;</div>
</div></center>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>

<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script>


<script>
 function GetAllImages() 
{
$("#slideshowPicturePlaceholder").css("display", "block");    
var soapEnv = "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'><soapenv:Body><GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'>";
    //The name of the image library is called 'SlideShow'. Replace the name bewlo with the name of your image library
 soapEnv += "<listName>SlideShow</listName>";
    soapEnv += "<query><Query><OrderBy Override='TRUE'><FieldRef Name='Created' Ascending='FALSE' /></OrderBy></Query></query>";
    soapEnv += "<viewFields><ViewFields><FieldRef Name='Title'/><FieldRef Name='ows_FileLeafRef'/></ViewFields></viewFields><rowLimit></rowLimit>";
    soapEnv += "</GetListItems></soapenv:Body></soapenv:Envelope>";

var port = window.location.port;
if (port.length <= 0)
 port = "";
else
 port = ":"+port;
var webservice = window.location.protocol+"//"+window.location.hostname+port+L_Menu_BaseUrl+"/_vti_bin/lists.asmx";

    $.ajax({
        url: webservice,
        type: "POST",
        dataType: "xml",
        data: soapEnv,
        complete: processQueryResults,
        contentType: "text/xml; charset=utf-8",
         error: function(xhr) {
        alert('Error!  Status = ' + xhr.status);}
    });
}

function onAfter(curr, next, opts) {
    var index = opts.currSlide;
    $('#prev')[index == 0 ? 'hide' : 'show']();
    $('#next')[index == opts.slideCount - 1 ? 'hide' : 'show']();
}

function processQueryResults(xData, status)
{
var port = window.location.port;
if (port.length <= 0)
 port = "";
else
 port = ":"+port;
//Change the below to point to your image library
var imageURL = window.location.protocol+"//"+window.location.hostname+port+L_Menu_BaseUrl+"/SlideShow/";
var itemURL = window.location.protocol+"//"+window.location.hostname+port+L_Menu_BaseUrl+"/SlideShow/Forms/DispForm.aspx?ID=";


$(xData.responseXML).find("z\\:row").each(function() {
  var title = $(this).attr("ows_Title");
  var imageLink = imageURL+$(this).attr("ows_FileLeafRef").substring($(this).attr("ows_FileLeafRef").indexOf('#')+1);
  var itemLink = itemURL+$(this).attr("ows_ID");
  var Html ="<a target='_blank' border='0' href='"+itemLink+"'><img width='250' height='250'  src='"+ imageLink +"'/></a>";

        $("#slideshow").append(Html);
    });

$("#slideshowPicturePlaceholder").css("display", "none"); 
$("#slideshowContentArea").css("display", "block");
$('#slideshow').cycle({fx:'scrollHorz',prev:'#prev',next:'#next',after:onAfter,timeout:0});

}

GetAllImages();
</script>