I am attempting to implement a Bootstrap carousel using SharePoint's Client Side Object Model via JavaScript. The code below displays items within a custom list using various columns -- mostly OOTB site columns from various content types. The code successfully outputs the items from the list, however they aren't within the carousel's container and fail to slide.
My intention is to grab the the fields from the list item, and output them in a div that uses the bootstrap carousel structure.
//Load Groups
ExecuteOrDelayUntilScriptLoaded(getListData, "sp.js");
function getListData() {
/*debugger;*/
var clientContext = new SP.ClientContext('https://mydomain/mysite/');
var oList = clientContext.get_web().get_lists().getByTitle('DynamicCarousel');
var camlQuery = new SP.CamlQuery();
//Set CAML here to filter
// camlQuery.set_viewXml('<View><Query><Where><Leq>' +
// '<FieldRef Name=\'ID\'/><Value Type=\'Number\'>100</Value>' +
// '</Leq></Where></Query><RowLimit>50</RowLimit></View>');
this.collListItem = oList.getItems(camlQuery);
clientContext.load(collListItem, 'Include(Title, PublishingRollupImage, ID, PublishingPageContent)');
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}
function onQuerySucceeded(sender, args) {
var listItemInfo = '';
var htmlToDisplay = new Array();
var carouselItemID;
var count = 0;
var k;
var listItemEnumerator = collListItem.getEnumerator();
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
carouselItemID = someHtmlToDisplay;
htmlToDisplay.push(carouselItemID);
/* listItemInfo += '\nTitle: ' + oListItem.get_item("Title") +
'\nWBS: ' + oListItem.get_item("PublishingRollupImage") + oListItem.get_item("PublishingPageContent") + oListItem.get_item("ID");
*/
var someHtmlToDisplay = '<div class="carousel-inner" role="listbox">' +
'<div class="item active">' +
oListItem.get_item('PublishingRollupImage') +
'<div class="container">' +
'<div class="carousel-caption">' +
'<h1> ' + oListItem.get_item('Title') + '</h1>' +
'<p>' + oListItem.get_item('PublishingPageContent') + '</p>' +
'<p>' + '<a class="btn btn-md btn-mc-default" role="button" href="mysite/Lists/DynamicCarousel/DispForm.aspx?ID=' + oListItem.get_item('ID') + '"> Read More</a>' + '</p>' +
'</div>' +
'</div>' +
'</div>';
/* htmlToDisplay = htmlToDisplay + '<tr class="ms-itmhover"><td>' +
oListItem.get_item("Title") + '\n</td><td>' +
oListItem.get_item("PublishingRollupImage") + '\n</td><td>' +
oListItem.get_item("ID") +'\n</td></tr>'; */
}
// $('#tblShowresults').append(htmlToDisplay);
var arrayLength = htmlToDisplay.length;
for (k = 0; k < arrayLength; k++){
$("#divGetListData").append(htmlToDisplay);
}
$('div.active img').addClass('first-slide');
}
function onQueryFailed(sender, args) {
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}