0

I've been trying to get the Nivo slider to work in SP2013. I want to connect it to a blog in a sub-site. The slider works fine using the raw html sample (without any links to SharePoint lists), but I can't seem to get it working when pulling data from the list. I've also tested the data and the code successfully retrieves the correct information from the list.

Given that the slider works without a list, I am starting to think it might be something to do with how the page loads data, perhaps the call to the Nivo function is made too early?

$(window).load(function() {
retrieveListItems();
$('#slider').nivoSlider();
});

My javascript is producing what appears to be the correct html (i've used random img from online):

<div class="nivoSlider" id="slider"><img title="Reporting back" src="https://s3-ap-southeast-1.amazonaws.com/expin/community/550e15686481272aad000023/M9a0doEXcgojevVuk38n.jpg">
<img title="Client implements Stock in Transit" src="https://s3-ap-southeast-1.amazonaws.com/expin/community/550e15686481272aad000023/M9a0doEXcgojevVuk38n.jpg">
<img title="Giving  even better direction" src="http://cdn.business2community.com/wp-content/uploads/2013/09/business-insurance-for-retail.jpg">
<img title=" Accreditation Passed" src="http://www.mckinsey.com/~/media/McKinsey/dotcom/Insights/Consumer%20Goods%20Retail/How%20retailers%20can%20keep%20up%20with%20consumers/FutureofRetail_1536x1152_Thumbnail_2x.ashx">
<img title=" our strong advocate" src="http://www.clocksoftsolutions.com/uploads/industries/1434110634_retail-etalase.jpg">
</div>

Here are my SP functions:

function retrieveListItems() {

var clientContext = new SP.ClientContext(siteUrl);
var oList = clientContext.get_web().get_lists().getByTitle('Posts');

var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml('<View><Query><Where><Geq><FieldRef Name=\'ID\' Ascending="False"/>' + 
    '<Value Type=\'Number\'>1</Value></Geq></Where><OrderBy><FieldRef Name =\'Modified\' Ascending="False"/></Query><RowLimit>3</RowLimit></OrderBy></View>');
this.collListItem = oList.getItems(camlQuery);

clientContext.load(collListItem, 'Include(Id, Title,  Summary, Image)');

clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));        

}

function onQuerySucceeded(sender, args) {

var listItemInfo = '';

var listItemEnumerator = collListItem.getEnumerator();

while (listItemEnumerator.moveNext()) {
    var oListItem = listItemEnumerator.get_current();

    var itemHtml;
    var fullHtml;

    if(oListItem.get_item("Image")){
    listItemInfo += '\nID: ' + oListItem.get_id() + 
        '\nTitle: ' + oListItem.get_item('Title') + 
        '\nSummary: ' + oListItem.get_item('Summary') +
        '\nImage url: '+ oListItem.get_item('Image').get_url();
     if (itemHtml === undefined || itemHtml === null) 
      {

         itemHtml = '<img src="' + oListItem.get_item('Image').get_url() + '" title="'+ oListItem.get_item('Title')+'" />';
        }
    else{
              itemHtml += '<img src="' + oListItem.get_item('Image').get_url() + '" title="'+ oListItem.get_item('Title')+'" />';
        }   

       }


        //create html block for slider div
        fullHtml =  itemHtml ;


}
//insert new html into innerHTML of slider div
alert(fullHtml);
   document.getElementById("slider").innerHTML = fullHtml;
alert(listItemInfo.toString());
}

function onQueryFailed(sender, args) {

alert('Request failed. ' + args.get_message() + '\n' +     args.get_stackTrace());
}
  • I'm just guessing, never tried nivo. But it could be that the images/html have to be in place before running nivo, try running $('#slider').nivoSlider(); after document.getElementById("slider").innerHTML = fullHtml; in your onQuerySucceeded method – Anders Aune Sep 10 '15 at 5:40
  • I tried that a while ago, too. I also had problems to get it working, so I ended up using this: en.share-gate.com/blog/… Maybe it helps... – Patrick Sep 10 '15 at 6:08
  • @Andres, thanks for your suggestion, it didn't work unfortunately, however I think the issue might be along those lines. Patrick, I'll give this a look and see how I get on if I can't get the nivo slider to work – GrantMcW Sep 10 '15 at 6:43
  • @GrantMcW you don't add htmlHead and htmlFoot to your fullHtml from what I can see? – Anders Aune Sep 10 '15 at 6:49
  • @AndersAune yes, sorry, I should probably remove them from the snippet. They were used in a previous attempt, I have the htmlhead and foot in the actual html code now, rather than adding it to the outputted innerhtml – GrantMcW Sep 10 '15 at 6:55
1

Changed some on your onQuerySucceeded , you have declared the variable fullHtml inside the while loop.

function onQuerySucceeded(sender, args) {

    var listItemEnumerator = collListItem.getEnumerator();

    // Moved outside while loop
    var fullHtml;

    while (listItemEnumerator.moveNext()) {
        var oListItem = listItemEnumerator.get_current();
        var itemHtml = "";
        //var fullHtml;

        if(oListItem.get_item("Image")){

            itemHtml = '<img src="' + oListItem.get_item('Image').get_url() + '" title="'+ oListItem.get_item('Title')+'" />';  
        }

        //create html block for slider div , added +=
        fullHtml +=  itemHtml ;

    }

    //insert new html into innerHTML of slider div
    document.getElementById("slider").innerHTML = fullHtml;
    $('#slider').nivoSlider();
}
  • Thanks for this, that was a silly error on my part. I tested it and it doesn't make any difference in the output unfortunately. I've also retested the output code in the html format, and that works without an issue. – GrantMcW Sep 14 '15 at 3:20
0

Thanks for all of the help, the solution was a combination of things, however the main issue was:

$(window).load(function() {
retrieveListItems();
$('#slider').nivoSlider();
});

The Nivo documentation states that the slider should be called at this point, however I had to remove:

$('#slider').nivoSlider();

I then placed it, as suggested by Anders, after the:

 document.getElementById("slider").innerHTML = fullHtml;

The important part was to make sure that it was removed from the Window.Load().

Worked a treat. As per usual, one line of code causes much frustration!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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