本文介绍了使用ajax填充下拉列表在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 valuesAnd 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中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！