JSOM Bootstrap Carousel

Question

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

Answer 1

I think you are running the carousel method before the query execution and so it is not working. You should call your $('#element_id').carousel() inside the onQuerySucceeded method after appending all your html content. I added the method after your while loop.

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

    }
    $('<your_element>').carousel();

    $('div.active img').addClass('first-slide');
}