0

So I am creating 2 drop down menus, the 2nd of which dynamically changes based off the first. However, the 2nd menu does not render the change, but is providing the correct options when viewing the Post with Firebug.

Here is the function that is supposed to render the menu

def findSubtagsForTags(){
    print Tag.getAll()

    def tag = Tag.get(params.tag.id)

    render(template: 'subtagSelection', model:  [subtags: tag.subtags])
    }

This method is being called in my _form.gsp template, which is called by create.gsp (both generated by grails scaffolding for the most part). Here is my code snippet where I am calling it

<g:select name="tag.id" from="${Tag.list()}" optionKey="id" optionValue="tagName"
            noSelection="['':'Choose Tag']"
            onchange="${remoteFunction (
                    controller: 'tag',
                    action: 'findSubtagsForTags',
                    params: '\'tag.id=\' + this.value',
                    update: 'subtagSelection'
            )}" />

 <td id="subtagSelection" valign="top">
        <select>
        <option>Choose Tag</option>
        <g:select name="subtags.id" id="subtags.id" from="${[]}" optionKey="id"/>
        </select>
</td>

and the subtagSelection template that is being rendered is

<g:select name="subtag.id" from="${subtags}" optionValue="name" optionKey="id" id = "subtags.id"/> 

The 2nd menu on the page is always "CHoose Tag", but using Firebug, when I look at the post, this is generated

<select name="subtag.id" id="subtags.id" >
<option value="1" >Training</option>
<option value="2" >Software</option>
</select> 

however, there is no change to the 2nd menu.

Under the Net Tab of firebug, This is the 'put' request called by my function

Post:
    Parameters : tag.id 1
Source:
    tag.id=1

Response:

<select name="subtagSelection" id="subtagSelection" >
<option value="1" >Training</option>
<option value="2" >Software</option>
</select> 

Any ideas/solutions?

EDIT: Issue was resolved after changing my code around a little, using https://stackoverflow.com/a/3771240/3691484 as a reference, changing the template file among other things

Community
  • 1
  • 1
Shrivar R
  • 123
  • 1
  • 12
  • You'll need to use Firebug (or similar tool) to see what is being sent to and getting received back from the `remoteFunction` call (use the Net panel in FB). I'm guessing the params may not be quite right. Also check there aren't duplicate `#subtagSelection` elements in the page. – nickdos Jun 03 '14 at 05:02
  • Edited the above to show my firebug 'Net' results. Also, in the remoteFunction, is the update paramater supposed to reference the ? or the contained within – Shrivar R Jun 03 '14 at 12:34
  • The `update` String value will allow the div with that `id` to have its contents set with the output from the remote call. So everything inside the `td` will be replaced. – nickdos Jun 03 '14 at 23:31

1 Answers1

0

Try a few modifications - see if makes any difference:

<g:select name="tag.id" from="${Tag.list()}" optionKey="id" optionValue="tagName"
        noSelection="['':'Choose Tag']"
onchange="${remoteFunction (
        controller: 'tag',
        action: 'findSubtagsForTags',
        params: "'tag.id=' + this.value",
        update: 'subtagSelection'
    )}"
 />

<td id="subtagSelection11" valign="top">
<div id="subtagSelection">
<g:select name="subtags.id" id="subtags.id" from="[]"
optionKey="id" noSelection="['': 'Choose Tag']" />
</div>
</td>

There was a minor issue a select within a select? - use the noSelection tag for when nothing is selected

V H
  • 8,382
  • 2
  • 28
  • 48