Tokeninput save new tag to database

Question

I am trying to save a new tag entered in input field that was not there in database and want to save that created tag on form submit. Here is my controller which is sending the autocomplete list to the tokeninput input field:

def tags = {
        def foundTags = Tag.findAllByTagnameIlike("${params.q}%")
        def output = []
        foundTags.each {
            output.add([id: it.id, name: it.tagname]) // assumes Tag has an id field exposed
        }
        if(output.size()==0){
            def c = Tag.createCriteria()
            def maxId = c.get {
                projections {
                    max('id')
                }
            }
            output.add([id:(maxId+1),name:params.q])
        }
        render output as JSON
    }

My jQuery script is:

<script type="text/javascript">
        $(document).ready(function () {
            $("#my-text-input").tokenInput("${createLink(controller: 'product', action: 'tags')}",{theme: "facebook",allowFreeTagging:"true"});
        });
    </script>

Now when I submit the form, i get params.tags as the ids of those newly entered tags in the input field.But actually these IDs do not exist and are created by output.add([id:(maxId+1),name:params.q]) just for the reason that tokeninput requires it to be there. So how do i get the tag names in the params.tags instead of the ids? Infact i require something like this map ["id1":"tagname1","id2":"tagname2".....]. So how do i get the actual tagname instead of the id fields in the server side action which persists the form params?

@aksu Its a question on jquery in general. If someone can do in php, i am sure that I can apply this in grails. I have gone through past tokeninput questions and seen that php coders have answered most of them. — rahulserver, Feb 14 '14 at 16:52
Where is `params.tags` coming from (is it generated by `tokenInput` somehow)? There isn't enough information in your question to know what's happening. I'm guessing you are submitting the page after the user has entered some tags, if so what is the form data being sent (paste an example). I can't see anywhere in the `tokenInput` examples that sets any form inputs when a user selects or adds new tags, so I'm not sure how the `id` is being set in the `params.tags` (there is no reference to `tags` in the `tokenInput` source code at all. — nickdos, Feb 14 '14 at 23:10
@nickdos Since there were no examples on tokeninput page, i asked here. params.tags on form submssion gives a string(e.g. "3,5,7") in which the numbers represent the ids of tags. — rahulserver, Feb 14 '14 at 23:28

score 1 · Accepted Answer · answered Feb 15 '14 at 16:03

Make use of the tokenValue parameter during set up.

e.g. In jQuery

    <script type="text/javascript">
            $(document).ready(function () {
                $("#my-text-input").tokenInput("${createLink(controller: 'product', action: 'tags')}",{
                   theme: "facebook",
                   allowFreeTagging:"true",
                   tokenValue:"name"
                 });
            });
        </script>

This will submit an array of names instead of IDs. If you need both name's and id's, you're probably best adding a custom attribute to each token through an onAdd parameter, and then setting that to the tokenValue.

Tokeninput save new tag to database

1 Answers1