Why Jquery tokeninput value is null?

Question

I have used http://loopj.com/jquery-tokeninput/ tokenizer. The array value is always null. This is my code. Can any one tell what is wrong with my code?

<div>
    <input type="text" id="first" name="first" onchange="callthis()"/>

    <script type="text/javascript">
    $(document).ready(function() {
        $("#first").tokenInput([
            {name: "Ruby"},
            {name: "Python"},
            {name: "JavaScript"},
            {name: "ActionScript"},
            {name: "Scheme"},
            {name: "Lisap"},
            {name: "C#a"},
            {name: "Fortran"},
            {name: "Visual Basic"},
            {name: "Ca"},
            {name: "C++"},
            {name: "Java"}
        ]);
    });
    </script>
</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="src/jquery.tokeninput.js"></script>
<link rel="stylesheet" href="styles/token-input.css" type="text/css" />

<script>
  function callthis(){
    var val = $('#first').tokenInput("get");
    alert(val);
  }
</script>

In their documentation they asked to use this line to get the values.selector.tokenInput("get");Thanks in advance.

Answer 1

I've just tried to use the following code:

 $("#first").tokenInput([
    {name: "Ruby"},
    {name: "Python"},
    {name: "JavaScript"},
    {name: "ActionScript"},
    {name: "Scheme"},
    {name: "Lisap"},
    {name: "C#a"},
    {name: "Fortran"},
    {name: "Visual Basic"},
    {name: "Ca"},
    {name: "C++"},
    {name: "Java"}
 ]);

  $("#first").change(function(){
     var val = $('#first').tokenInput("get");
  });

It works fine. See this sample http://jsfiddle.net/L4oth1d8/3/