data through ajax for tagify whitelist

Question

I'm trying to get the data through ajax for tagify whitelist. but I get the following mistake

ReferenceError: Can't find variable: clist

code is:

$.ajax({
                url: '/ajaxget/tags',
                method: 'GET',
                data: {
                    <?= csrf_token() ?> : '<?=csrf_hash()?>'
                },
                success: function(response) {
                 var clist = response;
                    //alert(response);
                }
            });


    var input = document.querySelector('input[name="tags"]');

    tagify = new Tagify(input, {
        enforceWhitelist: true,
      whitelist: clist,
      maxTags: 5,
      dropdown: {
        maxItems: 5,           
        classname: "tags-look", 
        enabled: 0,             
        closeOnSelect: false    
      }
    });

when I test it with "alert (response);" displays the data - ['123','333','763',asd']

Answer 1

You are trying to access a local variable from callback response as global variable.

             $.ajax({
                url: '/ajaxget/tags',
                method: 'GET',
                data: {
                    <?= csrf_token() ?> : '<?=csrf_hash()?>'
                },
                success: function(response) {
                 var clist = response;
                    populateList(clist);
                }
            });

    function populateList(clist) {
      var input = document.querySelector('input[name="tags"]');

      tagify = new Tagify(input, {
        enforceWhitelist: true,
        whitelist: clist,
        maxTags: 5,
        dropdown: {
          maxItems: 5,           
          classname: "tags-look", 
          enabled: 0,             
          closeOnSelect: false    
        }
      });
  }