0

I think this is more of a jQuery question than that of grails.I am trying to make tokeninput work with a grails form with the following input:

<g:field type="text" name="tags" id="my-text-input"></g:field>

This gets rendered on a web page as:

<input type="text" autocomplete="off" id="token-input-my-text-input" style="outline: none; width: 30px;">

Here is my jQuery code as mentioned in the above link:

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

<script type="text/javascript">
$(document).ready(function () {
    $("#my-text-input").tokenInput("/TaggableDemo/product/tags");
});
</script>

The tags action under ProductController is as:

def tags = {

        render Tag.findAllByTagnameIlike("${params.q}%")*.tagname as JSON
    }

The Tag domain has 3 entries: "Tag1","Tag2","Tag3" When i type "T" in the input element in question, the tags controller does get invoked for autocomplete, and also its returning the correct json(I found this by debugging).But nothing gets displayed in the autocomplete div popup. I wonder whats wrong here. So anyone could help making it work?

Community
  • 1
  • 1
rahulserver
  • 10,411
  • 24
  • 90
  • 164
  • You need to work out if the issue is with the JSON data coming from your controller or is something wrong with the way you've coded the JSP (not calling token lib properly, etc). So try grabbing the raw JSON from the token website and put it somewhere and load that first (static JSON). If that works, then the problem is with your JSON format. If not then its with your HTML/JS/CSS for token. – nickdos Feb 14 '14 at 08:23
  • I'm thinking its the JSON format - include your JSON in the question. The expected format is a list of Maps which include "name" and "id" keys - your code appears to be just a list of Strings (field called tagname). – nickdos Feb 14 '14 at 08:25
  • @nickdos The json is ok. But the issue seems strange as on debugging the action above, when I type text in the input field, the breakpoint on the render gets hit. But surprisingly, on inspecting using chrome's inspect element about the network calls,it shows 404. – rahulserver Feb 14 '14 at 08:34

1 Answers1

1

Try this:

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
    }
    render output as JSON
}

Code not tested sorry, so may have bugs.

nickdos
  • 8,348
  • 5
  • 30
  • 47