mdbootstrap/bootstrap-templates

Uncaught TypeError: Cannot read property 'name' of null in bootstrap-tagsinput.js.

igoralves1 opened this issue · 2 comments

igoralves1 commented

The dataset is returning null. Also when I press enter nothing happens.

//bootstrap-tagsinput.js. line 354
$.fn.typeahead.apply(self.$input, typeaheadjs).on('typeahead:selected', $.proxy(function (obj, datum, name) {
          var index = 0;
          typeaheadjs.some(function(dataset, _index) {console.log(dataset);
            if (dataset.name === name) {
              index = _index;
              return true;
            }
            return false;
          });

I did not used grunt because it is not working.
This is what I have in my index.php:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="bootstrap-tagsinput.css">
    <script src="bootstrap-tagsinput.js"></script>
    <script src="bloodhound.js"></script>
    <script src="typeahead.jquery.js"></script>

</head>
<body>

<div class="container">
    <h1>My First Bootstrap Page</h1>
    <p>This is some text.</p>
    <input type="text" />
</div>
<script>
    var cities = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('text'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        prefetch: 'cities.json'
    });
    cities.initialize();

    var elt = $('input');
    elt.tagsinput({
        itemValue: 'value',
        itemText: 'text',
        typeaheadjs: {
            name: 'cities',
            displayKey: 'text',
            source: cities.ttAdapter()
        }
    });
    elt.tagsinput('add', { "value": 1 , "text": "Amsterdam"   , "continent": "Europe"    });
    elt.tagsinput('add', { "value": 4 , "text": "Washington"  , "continent": "America"   });
    elt.tagsinput('add', { "value": 7 , "text": "Sydney"      , "continent": "Australia" });
    elt.tagsinput('add', { "value": 10, "text": "Beijing"     , "continent": "Asia"      });
    elt.tagsinput('add', { "value": 13, "text": "Cairo"       , "continent": "Africa"    });
</script>
</body>
</html>

abc

ManicMapple commented

same problem. Did you solve it?

akirarulez commented

Hi there,
the issue is caused by:

var typeaheadjs = self.options.typeaheadjs;
        if (!$.isArray(typeaheadjs)) {
            typeaheadjs = [null, typeaheadjs];
        }

This piece of code is adding a null value at the beginning of the typeaheadjs array.
So later in the code the instructions:

typeaheadjs.some(function(dataset, _index) {
            if (dataset.name === name) {
              index = _index;
              return true;
            }
            return false;
          });

are throwing the exception.
I didn't explore why the null as first element is needed, so my workaround is:

typeaheadjs.some(function(dataset, _index) {
            if (dataset != null && dataset.name === name) {
              index = _index;
              return true;
            }
            return false;
          });