In a SharePoint online site, I have created an custom Page, In which I make a Cross-site Rest API request to get items from a list. Sometimes my bootstrap selectpicker is not showing no items, and sometimes it does! Couldn't identify why it is happening. Below I have mentioned my code

It is how I am calling all CSS & JS libraries

<link rel="stylesheet" href="/sites/CMS/Style%20Library/css/bootstrap.css">
<link rel="stylesheet" href="/sites/CMS/Style Library/bootstrap/css/bootstrap-select.min.css">

<script src="/sites/CMS/Style%20Library/PJS/ajax.googleapis.com.jquery.3.2.1.jquery.min.js"></script>
<script src="/sites/CMS/Style%20Library/PJS/maxcdn.bootstrapcdn.com.bootstrap.3.3.7.js.bootstrap.min.js?csf=1">
<script src="/sites/CMS/Style%20Library/JS/alasql.min.js"></script>
<script src="/sites/CMS/Style Library/bootstrap/js/bootstrap-select.min.js"></script>
<script src="/sites/CMS/Style%20Library/JS/bootbox.min.js"></script>
<script type="text/javascript" src="/sites/CMS/Style%20Library/JS/CMSForm.js?ver=8"></script>

Below is my code :

var defPG = $.Deferred();
var listName = "PO";
    url: masterurl + "/_api/web/lists/getbytitle('" + listName + "')/items?$top=4999&$select=ID,Title,POTotal,RequisitionID,Created,PaymentTerms,ContractStartDate,ContractEndDate,SupplierName&$filter=IsRevision eq 'No'",
    method: "GET",
    headers: {
        "Accept": "application/json; odata=nometadata"
    success: function (data) {
        var items = data.value;
        var inputElement = '<option value="0">Search..</option>';
        for (var i = 0; i < items.length; i++) {
            var itemId = items[i].ID,
                itemVal = items[i].Title;
            if (itemVal != null) {

                inputElement += '<option value="' + itemId + '">' + itemVal + '</option>';
                    ID: itemId,
                    PONo: itemVal,
                    PoValue: items[i].POTotal,
                    ReqID: items[i].RequisitionID,
                    PODate: items[i].Created,
                    ContractStartDt: items[i].ContractStartDate,
                    ContractEndDt: items[i].ContractEndDate,
                    PayTerms: items[i].PaymentTerms,
                    Vendor: items[i].SupplierName
        $('#ddlPO').each(function () {
            $('option', this).each(function () {
                if ($(this).val() == '0') {
                    $(this).attr('selected', 'selected');
            console.log("Get PO Data Success with Items "+data.value.length);
    error: function (data) {
return defPG.promise();

Please suggest what I am doing wrong.

  • did you try using document.ready() ? Commented Aug 28, 2020 at 7:24
  • The above function loads after SP.SOD.executeFunc('sp.js', 'SP.ClientContext', LoadAllFunction)...I guess it is equivalent to $(document).ready() Commented Sep 2, 2020 at 8:20


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.