使用ajax填充下拉列表在grails中 [英] Populate dropdown list using ajax In grails

问题描述

我们试图在新事件中实现ajax，通过点击组来为我们赋予用户id的值，以便我们在create.gsp的视图中应用ajax

ajax用于create.gsp

 < g：javascript> document.observe（'dom：loaded'，function（）{$ （groupId）。observe（change，respondToSelect）;}）; 
函数respondToSelect（事件）
 {new Ajax.Updater（userId，/ smartserv / incident / updateSelect，{method：'get'，parameters：{selectedValue：$ F（groupId ）}}）;}< / g：javascript> 
  

这是在create.gsp中使用的标签

 < tr class =prop> < td valign =topclass =name> 
< label for =groupId>< g：message code =incident.groupId.labeldefault =Assignment Group/>< / label> 
< / td> 
< td valign =topclass =value $ {hasErrors（bean：incidentInstance，field：'groupId'，'errors'）}> 
 < / td> 
< / tr> 
< div id =userId> 
< tr class =prop> 
< td valign =topclass =name> 
< label for =userId>< g：message code =incident.userId.labeldefault =Assign Id/>< / label> 
< / td> 
< td valign =topclass =value $ {hasErrors（bean：incidentInstance，field：'userId'，'errors'）}> 
 < / 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]）
} 
  

\\ sIg.gsp

 < g：从=$ {groupId.members}中选择

 name =value => 
< / g：选择> 
  

数据库表：group_（字段：groupid，说明，应用程序）

table：user（fields：userid，username等）

table：user_groups（fields：userid和usergroupid）

通过使用这个表，我们必须通过使用ajax获取值

我们正在对assignid采取行动，但我们没有获得特定值
和任何人都可以建议网站或pdf，如何在控制器中执行SQL查询。

解决方案

在控制器中，我写了这段代码

  import grails.converters。* 
 def ajaxGetMembers = {
 def group = Usergroup.get（params.id）
 render group？.members as JSON 
 } 
  

在create.gsp中

 < g：javascript library =prototype/> 
< g：javascript> 
函数updateUser（e）{
 //响应返回成一堆-o-JSON 
 var members = eval（（+ e.responseText +））//评估JSON 
 
 if（members）{
 var rselect = document.getElementById（'user'）
 
 //清除之前的所有选项
 var l = rselect.length 
 
 while（l> 0）{
 l-- 
 rselect.remove（l）
} 
 
 //重建选择
 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 
尝试{
 rselect.add（opt，null）//符合标准;在IE 
} 
 catch（ex）{
 rselect.add（opt）//仅限于IE 
} 
} 
} 
 
 
 
 //当页面加载初始化城市
时调用这个函数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 =topclass =name> 
< label for =group>< g：message code =incident.group.labeldefault =Group/>< / label> 
< / td> 
< td valign =topclass =value $ {hasErrors（bean：incidentInstance，field：'group'，'errors'）}> 
  onchange =$ {remoteFunction（
 controller：'incident'，
 action：'ajaxGetMembers'，
 params：'\'id = \'+ this.value'，
 onComplete： 'updateUser（e）'）}
>< / g：select> 
< / td> 
< / tr> 
 
 
< tr class =prop> 
< td valign =topclass =name> 
< label for =user>< g：message code =incident.user.labeldefault =User/>< / label> 
< / td> 
< td valign =topclass =value $ {hasErrors（bean：incidentInstance，field：'user'，'errors'）}> 
  
 
< / td> 
< / tr> 
  

we are trying to implement ajax in new incident to get values of assign user id by click on groups for that we apply ajax in views on create.gsp

ajax used in 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>

this are tags used in 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> 

In incident controller we used updateSelect to get values

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>

database table:group_(fields:groupid , description, application)

table:user(fields:userid,username,etc)

table:user_groups( fields:userid and usergroupid)

by using this tables we have to get values by using ajax

we are getting action on assignid but we are not getting particular values And Can anyone suggest website or pdf that how to implement sql queries in controller.

解决方案

i am work on that i got answer for above question i am posting my answer.

In controller i wrote this code

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

In 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> 

place above code in header part in 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>

这篇关于使用ajax填充下拉列表在grails中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！