Jquery tokenInput - Cannot read property of undefined problem

Question

What I am doing:

• Performing HTTP get request

• When I get response, I am adding one of the property in tokenInput. Please see below code

  $http.get('/product/getDetails/'+$scope.productId)
  .then(function (response) {
  
      var brand = response.brand;
      var manufacturer = response.manufacturer;
  
      $http.get('/category/getAllTypes')
      .then(function (response) {
  
      }
  
  
      $timeout(function () {
              $(document).ready(function() {
                  $('#brand').tokenInput("add", {id: brand._id, name: brand.name, isActive: 0, checkStatus: 1});
                  $('#manufacturer').tokenInput("add", {id: manufacturer._id, name: manufacturer.name, isActive: 0, checkStatus: 1});
          })
      }, 500);
  }
  

Problem :

I am getting following error.

TypeError: Cannot read property 'add' of undefined
at a.fn.init.add (jquery.tokeninput.js:110)
at a.fn.init.$.fn.tokenInput (jquery.tokeninput.js:126) 

What I tried :

I tried to initialize tokenInput by

    $('#brand').tokenInput("../plugins/tokeninput/js/jquery.tokeninput.js");
    $('#brand').tokenInput("add", {id: brand._id, name: brand.name, isActive: 0, checkStatus: 1});

But it shows two tokenInputs.

I have searched a lot but did not find solution. Any help/suggestion would be appreciated.

Answer 1

have you tried to call it after having initialised the function to fetch results from the url ?

e.g.

$('#brand').tokenInput(/yourApi/, {  

// define the functions:  

    onAdd : function (item) {  
                var tokens = $('#brand').tokenInput('get');
                ...
              },

    ....

}

// now, after above function, you try to populate it "programmatically"

$('#brand').tokenInput("add", {id: brand._id, name: brand.name, isActive: 0, checkStatus: 1});