Usando jquery (incompatibiladad entre prototype.js y grailsUI 1.1-SNAPSHOT)
Siendo sincera, hasta que no me he visto en la necesidad no me he puesto a utilizar jquery aunque si me lo había planteado.
El motivo ha sido una incompatibilidad que hay entre la librería prototype.js y Grails-UI 1.1-SNAPSHOT y es que estaba intentando hacer un formulario de búsqueda con selects encadenados o dependientes unos de otros y que a su vez, se mostrara el resultado en un gui:datatable. Necesitaba prototype porque estaba realizando una llamada en el “onchange” del “select” utilizando “${remoteFunction(…)}” El problema es que la tabla no se carga y sólo salía “Loading…” además del siguiente error javascript:
too much recursion } else if (isArray(input)) { //grailsui.js (line 48) (ver error)
Total, que después de dar vueltas por google y de consultar en la lista de correo llegué a la siguiente conclusión:
1- Usar jquery
2-Volver a Grails-UI 1.0.4 (en esta versión no existe el problema)
Y como no iba a volver atrás en el tiempo pues decidí utilizar jquery y este es el resultado:
searchForm.gsp
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="layout" content="main" />
<g:javascript library="jquery-1.3.2" />
<script>
$(document).ready(function() {
$("#personSelect").change(function() {
$.ajax({
url: "/persons/search/loadAddress",
data: "id=" + this.value,
cache: false,
success: function(html) {
$("#addressSelect").html(html)
}
});
});
});
</script>
</head>
<body>
>[...]
<g:form>
<div>
<table>
[...]
<td valign="top" class="value ${hasErrors(bean:person,field:'userRealName','errors')}">
<g:select
id="personSelect"
optionKey="id"
from="${Person.list()}"
name="personSelect" value="">
</g:select>
</td>
><td valign="top" class="name">
<label for="address">Address:</label>
</td>
<td valign="top" class="value ${hasErrors(bean:address,field:'description','errors')}">
<div id="addressSelect">
<g:select noSelection="${['null':'Select One...']}"
optionKey="id"
from=""
name="addressSelect" value="">
</g:select>
</div>
</td>
[...]
</table>
</div>
</g:form>
<div>
<gui:datatable> [...] </gui:datatable>
</div>
</body>
</html>
searchController.groovy
def loadAddress = {
def address = []//Address.findByPerson(params.id)
if(address.size()==0){
render """<select id="addressSelect" name="addressSelect"><option value="-1">- Select One -</option></select>"""
}else{
render g.select( optionKey:'id', from: address, id: 'addressSelect', name: "addressSelect")
}
}
y esto es todo.
Seguiré indagando en jquery
