1

Note: I am a beginner and new to SharePoint and not a regular with SharePoint based projects.

Kindly refer commented out code only if needed. I am building a sample page and displaying it on SharePoint 2010 CEWP. I have created a library named PLM under which I have stored all my CSS, JS, txt and images. Here is my HTML code:

<html>
<head>
<title>PLM</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/0.7.1a/jquery.SPServices-0.7.1a.min.js"></script>
<script type="text/javascript" src="/PLM/listSlider.js"></script>
<SCRIPT type=text/javascript>
$(document).ready(function() {
//alert("called");   
//alert($().SPServices.SPGetCurrentSite());
var list = "Announcements";                      
var fieldsToRead = "<ViewFields><FieldRef Name='Title' /></ViewFields>";
var query="<Query></Query>";
$().SPServices({
operation: "GetListItems",
async: false, 
listName: "Announcements",
CAMLViewFields: fieldsToRead,
CAMLQuery: query,                                                                        
completefunc: function(xData, Status)
{
    $(xData.responseXML).find("z\\:row, row").each(function () 
    {
        //alert(xData.responseXML);
        var _Title = $(this).attr("ows_Title");
        //alert(_Title);
        var _Dream_x0020_Destination = $(this).attr("ows_Dream_x0020_Destination");
        var _PPP =  $(this).attr("ows_PPP");

        $("#Announcement").append("<li id='slide'>"+ _Title +"</li>");
    });
}
});

});

</script>

<link rel="stylesheet" type="text/css" href="/PLM/style.css">
</head>
<body>
<div class="container">
    <!-- <div class="main">
        <div id="content">
            <article>
            <h1>Product Lifecycle Management</h1>
            <p class="text">What is PLM?</p>    
            <p class="text">Product Lifecycle Management (PLM) helps manufacturers manage complex, cross-functional processes, coordinating the efforts of distributed teams to consistently and efficiently develop the best possible products.</p></article>
            <div id="water"><img src="/PLM/Landing page/Watermark.png" /></div>
            <div id="chart"><img src="/PLM/Landing page/Chart.png" /></div>
        </div>
        <div id="contact">
            <div id="rect">
                <p>&nbsp;&nbsp;Contacts:</p>
            </div>
            <div id="cr">
                <ul class="contact-img">
                    <li><img src="/PLM/Landing page/Contacts/SomeName1.png"></li>
                    <li id="align">Cass Wade<br/>Project Manager</li>
                    <li><img src="/PLM/Landing page/Contacts/SomeName2.png"></li>
                    <li id="align">Meredith<br/>HR Head</li>
                    <li><img src="/PLM/Landing page/Contacts/SomeName3.png"></li>
                    <li id="align">Simon<br/>CEO</li>
                    <li><img src="/PLM/Landing page/Contacts/SomeName4.png"></li>
                    <li id="align">Roger<br/>Director</li>
                </ul>
            <hr/>
            </div>
        </div>
    </div> -->

    <div class="sidebar">
        <div id="AT">
            <ul class="contact-img1">
                <li><img src="/PLM/Landing page/Alerts_icon.png"></li>
                <li id="lefty">Alerts</li>
            </ul>
            <div id="Announcement">
                <ul id="slider"></ul></div>
            <br/><hr/>
            <div id="OPL">
                <ul class="contact-img1">
                    <li><img src="/PLM/Landing page/Trainings-OPL_icon.png"></li>
                    <li id="lefty">Training & OPLs</li>
                </ul>
            </div>
        </div>
        <!-- <div id="Links">
            <ul class="contact-img1">
                <li id="linkhead">Quick Links</li>
            </ul>
        </div> -->
    </div>
</div>
</body>
</html>

Here is my CSS:

/* .container {
background-color: #bad3df;
width: 100%;
height:100%;
position:relative;
font-family: "Arial";
}

#content {    
font-size: 14pt;
left: 0%;
position: relative;
height: 75%;
width: 100%;
} */

.sidebar {
position: absolute;
display: inline-block;
overflow: hidden;
width: 28%;
height: 99%;
float: right;
}

/* #water {
position: absolute;
top: 0%;
left: 0%;
height: 100%;
width: 100%;
}

.main {
display: inline-block;
overflow: hidden;
padding: 2px;
width: 70%;
height:99%;
}

#chart{
position: relative; 
margin-left: 14%;
}

#rect{
position: relative;
height: 35px;
border: px solid transparent;
background-color: #5ca3ca;
margin-left: 85px;
font-size: 22pt;
color: #FFFFFF;
}

article {
text-align: justify;   
margin-left: 85px;
}

p.text{
padding-top: 40px;
word-wrap: break-word;
} */

#contact{
position: relative;
margin-top: 60px;
}

/* .contact-img {
padding: 40px 0px 15px 0px;
margin: 0;
position: relative;
list-style: none;
border: none;
display: flex;
padding-left: 0px;
} */

.contact-img1 {
position: relative;
list-style: none;
border: none;
margin-bottom: 0px;
display: flex;
padding-left: 0px;
}

/* .contact-img li {
display: table-cell;
padding: 0px 0px 0px 0px;
vertical-align: middle;
margin-left: 25px;
width: 69px;
height: 72px;
flex: 1;
} */

.contact-img1 li {
display: table-cell;
padding: 20px 10px 25px 25px;
font-size: 20pt;
vertical-align: middle;
margin-bottom: 0px;
}

.contact-img td{
border: 1px solid red;
}

hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #82adcc;
margin: 0em 0;
padding: 0;
}

/* #cr{
margin-left: 85px;
} */

#AT{
margin-left: 50px;
margin-right: 40px;
height: 60%;
margin-bottom: 20px;
background-color: #FFFFFF;
}

/* #Links{
margin-left: 50px;
margin-right: 40px;
height: 36%;
background-color: #d8e6ed;
} */

#align{
vertical-align: middle;
}

#Announcement{
height: 30%;
overflow: auto;
font-size: 22pt;
text-decoration: underline;
margin-left: 25px;
margin-right: 40px;
}

div#Announcement td{
font-size: 14pt;
}

#lefty{
display: table-cell;
padding: 20px 10px 25px 0px;
font-size: 20pt;
vertical-align: middle;
margin-bottom: 0px;
padding-left: 0px;
}

.slider{
list-style-type: none;
padding: 2px;
margin: 0px;
}

#slide{
font-size: 14pt;
list-style-type: none;
padding: 0px;
margin: 0px;
}

And finally my Javascript code only for Announcement List content looping (vertical looping). Kindly note that this List is actually fetched from SharePoint Announcement List:

$(function () {
var startTime = +new Date();
$('#Announcement').css('overflow', 'hidden');
var slider = $('#slider'), 
    items = slider.find('li');
var sliderHeight = slider.height(),
    itemsNum = items.length,
    itemHeight = items.height();

slider.css('top', '-' + (sliderHeight + itemHeight) + 'px');

var startPos = slider.css('top');
items.first().before(items.clone());
items.last().after(items.clone());
scrollItems(slider,sliderHeight,itemHeight,startPos,4);
var endTime = +new Date();
var diff = endTime - startTime;
console.log(diff);
setInterval(function(){ 
    scrollItems(slider,sliderHeight,itemHeight,startPos,4);
}, 10000);
});

function scrollItems(Announcement, targetsHeight, increment, startPos, temps) {
var secs = temps * 1000;
Announcement.animate({
    'top': '-' + ((targetsHeight * 2) + increment) + 'px'
}, secs, 'linear', function () {
    Announcement.css('top', startPos);
});
}

Problem: I am basically displaying Announcement List as normal HTML list. I would like this list to continuously loop (vertically.. "A typical news alerts / news feed", something of this sort). With this code, I am unable to achieve auto-looping of content fetched from an Announcement List. Announcement List is displayed though. I believe it is because the list is generated dynamically and so when my javascript code runs it never finds any list and doesn't loop it. Correct me if I am wrong. How do I resolve this issue? How do I make my JS run after SPSerivces call is complete and Announcements List is ready? Any help with feedback will be highly appreciated. Thanks in advance!!!

Improve this question

1 Answer 1

Reset to default
2

Your looping code is probably running before the SPServices call is complete. You're using SPServices version 0.7.1a, and the current version is 2014.02. The difference is significant in that SPServices now uses deferred promises so that you can wait to use the returned data until it's done being fetched.

First you get the promise, then once it's done, you manipulate the responseXML. Only after that's done should you then run your looping code.

<script src="/scripts/jquery.min.js"></script>
<script src="/scripts/jquery.SPServices-2014.02.min.js"></script>
<script>
$(document).ready( function(){
    var spPromise = $().SPServices({
        operation: "GetListItems",
        listName: "Announcements",
        async: false
    });
    spPromise.done(function(){
        $(spPromise.responseXML).SPFilterNode("z:row").each(function(){
            var _Title = $(this).attr("ows_Title");
            $("#Announcement").append("<li id='slide'>"+ _Title +"</li>");
        });     
    });
});
</script>
Improve this answer
7
  • I tried using your code but it is not working.... It is not even fetching List items from Announcements List. Actually, there are some bugs in SPServices 2014.02 and thus not highly suitable for those working on SharePoint 2010. Any other way to make this work? Thanks!!!
    – Yash Saraiya
    Commented Sep 24, 2015 at 5:34
  • I've been using 2014.02 in 2010 for months with no problem. But if it still makes you uncomfortable, promises have been in SPServices since the 2013 version. Before promises were available, I had some success storing the returned values to a multidimensional array and manipulating the array afterwards, but it's unreliable and quite slow.
    – Erin L
    Commented Sep 24, 2015 at 13:20
  • You can also include a completefunc for debugging to find out why it's not returning any items. (example - eikden.wordpress.com/2011/05/19/…)
    – Erin L
    Commented Sep 24, 2015 at 13:24
  • It is returning the items... but i am unable to achieve an effect like this. I believe when my javascript is called at that time list isn't found as sharepoint is yet to fetch that list
    – Yash Saraiya
    Commented Sep 24, 2015 at 13:30
  • 1
    What is the use for Promises if you set async:false ??
    – Danny '365CSI' Engelman
    Commented Sep 25, 2015 at 9:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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