Displaying other details according to the selected option in grails

<head>
<g:javascript library='jquery' />
<r:layoutResources />
<script type="text/javascript">
    function getGroupsDetails(){
        var selectedGroup = jQuery("#group").val();
        if(selectedGroup != "")
            ${remoteFunction (controller: 'groups', action: 'details', params: '\'groupId=\' + selectedGroup', update: 'details')}
    }
</script>
</head>
<body>
    <div class="col-xs-12 col-sm-4">
        <strong>By Group Name :</strong>
        <g:select id="groups" name="groupName" from="${Groups.list()}" value="${groupsInstance?.id}" noSelection="['':'-Select-']" optionKey="id" onChange="getGroupsDetails();" />
        <div id="details"></div>
    </div>
</body>
</html>

The details action is as follows

def details(){
    println "in details"
    def groupIns = Groups.get(params.id)
    println groupIns.id
    render(template: "details", model: [groupIns: groupIns])
 }

Now its entering into the javascript as well as the details controller. In the controller i printed the id also. but in gsp it shows nothing...

Solution

Include toString in your class. when object print our tostring return gname

    class Groups {

           String gowner

           String gname

           int devicenum

        static constraints = {

        }


        String toString() {
            "$gname"
        }

    }

first.gsp:

In select no need to list.gname(), because we include toString().In the following, When we select group , it call the javascript function that will call the action that update the particular div.I am doing in ajax.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<g:javascript library='jquery' />
<r:layoutResources />

    <script type="text/javascript">
        function getGroupDetails(){
                    alert("Function calling");
            var selectedGroup = jQuery("#group").val();
                    alert(selectedGroup);
            if(selectedGroup != "")
                ${remoteFunction (controller: 'group', action: 'details', params: '\'groupId=\' + selectedGroup', update: 'details')}
        }

    </script>
</head>


<g:select id="group" name="groupName" from="${Groups.list()}"
value="${groupInstance?.id}" noSelection="['':'-Select-']" optionKey="id" 
onChange="getGroupDetails();" />

<div id="details"></div>

controller action:

def details(){
   println params.groupId
   def groupIns = Group.get(params.groupId)
   render(template: "details", model: [groupIns: groupIns])
}

_details.gsp:

 Name:${groupIns.gname}
 Owner:${groupIns.gowner}
 Devicenum:${groupIns.devicenum}