0

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());
}
  • Is there only carousel auto sliding issue OR your data is not rendering properly in carousel ?? – Rohit Waghela Oct 27 '17 at 9:31
  • And yes. Can you send the HTML structure that is getting rendered in your page ? – Rohit Waghela Oct 27 '17 at 9:39
0

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');
}
  • Thanks for the quick reply. What do you mean by $('<your_element>').carousel(); – Stephenzi Nov 1 '17 at 14:35
  • The element for which you have to apply carousel. This triggers the carousel functionality for the entire element. This function is defined in the bootstrap. If you're not providing it carousel won't work. – Arut Nov 6 '17 at 2:23

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.