Bind SharePoint termset to Bootstrap multiselect

Question

I am trying to bind SharePoint online terms retrieved using JSOM to jquery multiselect dropdown control without luck below is my current code to get the terms and bind to the multiselect contorl. HoweverWhen the page load to terms are binded to the multi-select control

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<select id="parent_task" multiple="multiple"></select>
<script type="text/javascript">
$(document).ready(function () {        


        //This makes sure all necessary Js files are loaded before you call taxonomy store
        SP.SOD.executeFunc('sp.runtime.js', false, function () {
            SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {
                SP.SOD.registerSod('sp.taxonomy.js', SP.Utilities.Utility.getLayoutsPageUrl('sp.taxonomy.js'));
                //loads sp.taxonomy.js file
                SP.SOD.executeFunc('sp.taxonomy.js', false, GetTermsFromTaxonomyStore);

      $("#parent_task").multiselect({ includeSelectAllOption: true });
            });

        });


    });
    //This method uses the Taxonomy client side object calls to get the terms 
    function GetTermsFromTaxonomyStore() {

       var termSetName = "ABB Tasks";
var locale = 1033; // your locale. Here is English

var clientContext  = SP.ClientContext.get_current();
var taxonomySession = SP.Taxonomy.TaxonomySession.getTaxonomySession(clientContext);
var termStore = taxonomySession.getDefaultSiteCollectionTermStore();
var termSets = termStore.getTermSetsByName(termSetName, locale);
var termSet = termSets.getByName(termSetName);
var terms = termSet.getAllTerms();

clientContext.load(taxonomySession);
clientContext.load(termStore);
clientContext.load(termSet);
clientContext.load(terms);

clientContext.executeQueryAsync(function onSuccess() {
    var enumerator = terms.getEnumerator();

    while (enumerator.moveNext()) {
        var spTerm = enumerator.get_current();
        var name = spTerm.get_name();
        var id = spTerm.get_id();
      $('#parent_task').append('<option value = "'+name +'">' +name + '</option>');

    }



}, function onFailure(args) {
    alert('Error: '+args.get_message());
});
    }
</script>

Bind SharePoint termset to Bootstrap multiselect

0 Answers0