Заполните выпадающий список с помощью Ajax в Grails

Question

мы пытаемся внедрить ajax в новом инциденте, чтобы получить значения назначенного идентификатора пользователя, нажимая на группы, для чего мы применяем ajax в представлениях create.gsp

ajax используется в create.gsp

<g:javascript>document.observe('dom:loaded', function() {$("groupId").observe("change", respondToSelect);});        
            function respondToSelect(event)
            {new Ajax.Updater("userId","/smartserv/incident/updateSelect",{method:'get', parameters: {selectedValue : $F("groupId")} });}</g:javascript>

это теги, используемые в create.gsp

<tr class="prop"> <td valign="top" class="name">
                                    <label for="groupId"><g:message code="incident.groupId.label" default="Assignment Group" /></label>
                                </td>
                                <td valign="top" class="value ${hasErrors(bean: incidentInstance, field: 'groupId', 'errors')}">
                                    <g:select id="groupId" name="groupId" from="${app.Usergroup.list()}" optionKey="id" value="${incidentInstance?.groupId?.id}"  />
                                </td>
                            </tr>
                            <div id="userId">
                            <tr class="prop">
                                <td valign="top" class="name">
                                    <label for="userId"><g:message code="incident.userId.label" default="Assign Id" /></label>
                                </td>
                                <td valign="top" class="value ${hasErrors(bean: incidentInstance, field: 'userId', 'errors')}">
                                    <g:select  name="userId" from="${app.User.list()}" optionKey="id" value="${incidentInstance?.userId?.id}"  />
                                </td>
                            </tr> 
                            </div> 

В контроллере инцидентов мы использовали updateSelect для получения значений

def dataSource
   def updateSelect = {
             def sql = new Sql(dataSource)
                         def user_id = sql.execute("SELECT distinct user_id FROM user_groups where user_groups.usergroup_id='+usergroup_id+'")
  render(usergroup_id:params.selectedValue,template:"assignId", model : ['user_id' : user_id])
}        

_assignId.gsp

<g:select
       from="${groupId.members}"
       name="" value="">
</g:select>

таблица базы данных: group_ (поля: groupid, описание, приложение)

таблица: пользователь (поля: идентификатор пользователя, имя пользователя, и т.д.)

таблица: user_groups (поля: userid и usergroupid)

Используя эти таблицы, мы должны получить значения, используя ajax

мы получаем действие для assignid, но мы не получаем конкретные значения И может кто-нибудь предложить веб-сайт или PDF, что, как реализовать запросы SQL в контроллере.

Answer 1

Я работаю над тем, что получил ответ на вышеуказанный вопрос. Я публикую свой ответ.

В контроллере я написал этот код

import grails.converters.*
def ajaxGetMembers = {
        def group = Usergroup.get(params.id)
        render group?.members as JSON
    } 

В create.gsp

<g:javascript library="prototype"/>
         <g:javascript>
    function updateUser(e) {
        // The response comes back as a bunch-o-JSON
        var members = eval("(" + e.responseText + ")")  // evaluate JSON

        if (members) {
            var rselect = document.getElementById('user')

            // Clear all previous options
            var l = rselect.length

            while (l > 0) {
                l--
                rselect.remove(l)
            }

            // Rebuild the select
            for (var i=0; i < members.length; i++) {
                var user = members[i]
                var opt = document.createElement('option');
                opt.text = user.userId
                opt.value = user.id
                try {
                    rselect.add(opt, null) // standards compliant; doesn't work in IE
                }
                catch(ex) {
                    rselect.add(opt) // IE only
                }
            }
        }
    }


    // This is called when the page loads to initialize city
    var zselect = document.getElementById('user.id')
    var zopt = zselect.options[zselect.selectedIndex]
    ${remoteFunction(controller:"incident", action:"ajaxGetMembers", params:"'id=' + zopt.value", onComplete:"updateUser(e)")}

</g:javascript> 

поместите вышеуказанный код в часть заголовка в create.gsp

<tr class="prop">
                                <td valign="top" class="name">
                                    <label for="group"><g:message code="incident.group.label" default="Group" /></label>
                                </td>
                                <td valign="top" class="value ${hasErrors(bean: incidentInstance, field: 'group', 'errors')}">
                                    <g:select  optionKey="id"  name="group.id" id="group.id" from="${app.Usergroup.list()}"
        onchange="${remoteFunction(
            controller:'incident', 
            action:'ajaxGetMembers', 
           params:'\'id=\' + this.value', 
            onComplete:'updateUser(e)')}"
    ></g:select>
                                </td>
                            </tr>


                            <tr class="prop">
                                <td valign="top" class="name">
                                    <label for="user"><g:message code="incident.user.label" default="User" /></label>
                                </td>
                                <td valign="top" class="value ${hasErrors(bean: incidentInstance, field: 'user', 'errors')}">
                                   <g:select name="user.id" optionKey="id" id="user" selectedValue="groupId"  ></g:select>


                                </td>
                            </tr>

Answer 2

Вам не нужно писать JavaScript для этого. Для этого используйте тег / функцию remoteFunction:

<g:select onchange="${remoteFunction(
                    action:'updateSelect', 
                    params:'\'groupId=\' + this.value', 
                    update:'userId',
                    id:'groupId',
                    name:'groupId',
                    from:'${app.Usergroup.list()}', 
                    optionKey:'id', 
                    value:'${incidentInstance?.groupId?.id}')}" />

На стороне сервера выполните:

def updateSelect = {
    def userList = UserGroup.get(params.groupId).user;

    render(template:"assignId", model: ['userList' : userList])
}        

удачи;)