jQuery Tokeninput and the onFreeTaggingAdd callback

Question

The jQuery plugin Tokeninput (master branch) (https://github.com/loopj/jquery-tokeninput) has a new feature for adding tags. Unfortunately this feature so far is best documented at Twitter: https://twitter.com/loopj/status/332249287062851585.

I'm trying to figure out how to use the onFreeTaggingAdd, but unfortunately I'm a jQuery and javascript newbie.

In short I would like the callback to take the output from my api and use it in the tokenbox. This way I would be able to modify the tag (lower case etc) and to add an id. I would also be able to replace it by another ID/tag if that's a policy suggested by the api.

Below, please see my code so far. I've tried several options to set item=data and return that value, but so far without success. Any help is appreciated!

onFreeTaggingAdd: function (item) {

$.post("../php/add_tagg_02.php", {tag: item, userid: "userid-dummy"} )
.done(function(data, status, xhr) {
alert ("Your suggested new tag " + data.name + " is entered in the database and will be considered for future use.");
console.log( data.name ); //returns the "new" name from the api
console.log( data.id ); //returns the id provided by the api
})
    return item; //returns the "old" name from the user input   
},

Answer 1

I believe the library sets a freetag's ID to the same as its name as a default, the only way to change that would be to edit the add_freetagging_tokens() method within the library.

At the point it is called, the token is nothing more than a string, so to change the name, you could simply do this:

onFreeTaggingAdd: function (item) {

$.post("../php/add_tagg_02.php", {tag: item, userid: "userid-dummy"} )
.done(function(data, status, xhr) {
alert ("Your suggested new tag " + data.name + " is entered in the database and will be considered for future use.");
console.log( data.name ); //returns the "new" name from the api
console.log( data.id ); //returns the id provided by the api
})
    return data.name; //Sets the tokens Name/ID to be the new name from the api.
},

If you did want to also customize the ID, it should be relatively simple to change the method to return an object, instead of a string.

Also be aware that this token obviously won't be searchable for, unless you also update your data source.

Answer 2

You can add and remove token programatically, like from examples:

   $(document).ready(function() {
    $("#demo-input-plugin-methods").tokenInput("http://shell.loopj.com/tokeninput/tvshows.php");
                // Add a token programatically
                $("#plugin-methods-add").click(function () {
                    $("#demo-input-plugin-methods").tokenInput("add", {id: 999, name: "James was here"});
                    return false;
                });
// Remove a token programatically
            $("#plugin-methods-remove").click(function () {
                $("#demo-input-plugin-methods").tokenInput("remove", {name: "James was here"});
                return false;
            });
   });