Nivo Slider Javascript Object model not displaying

Question

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());
}

Answer 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();
}

Answer 2

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!