In my businness web application, I wanted to use a selectbox which call a controller method to check mail address stores in ldap. On change of selectbox, it will automaticaly check if the mail exists in ldap.In this paper, we will talk about the use of
remoteFunction with 2 parameters.I wrote it because I had difficulties with this ( especially the syntax ) and I hope it could help someone !
The gsp
In my gsp, I had an input text and a select box.The remoteFunction calls the action of the controller
ajaxCheckMailInLDAP. Parameters are passed in params. ( Be carefull at the syntax ).Once achieved, the javascript method checkLdapMail(data) called.
example
// Show the result
<div id="create_status_ok" class="alert alert-success" role="alert" style="display: none">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Info:</span>
Vérification dans le LDAP OK ! vous pouvez créer cette adresse.
</div>
...
// form that use remoteFunction
<form>
<input type="text" class="form-control" id="rne" name="rne" placeholder="....087XXX" value="">
...
<g:select noSelection="['0':'Choisir un type de boîte']" optionKey="id" optionValue="fullNameType" name="shortNameType" id="selecttype" from="${toolprod.MailType.list()}"
onchange="
cleanMsg();
${remoteFunction(
controller:'tools',
action:'ajaxCheckMailInLDAP',
params:'\'id=\' + this.value + \'&rne=\' + document.getElementById(\'rne\').value',
onSuccess:'checkLdapMail(data)')}"
></g:select>
</form>
The controller's action
Here is my controller wich render an array as JSON.Note that the name of data variable is important !
class ToolsController {
...
def ajaxCheckMailInLDAP = {
log.info("ajaxCheckMailInLDAP()")
String mail = params.rne + "@.."
// Init JSON data
def data = [:]
data.put("id", "1")
if (checkMail(mail)) {// just return a boolean
data.put("text", "KO")
} else {
data.put("text", "OK")
}
data.put("mail", mail)
log.info("ajaxCheckMailInLDAP() END" + mail)
render data as JSON
}
....
}
To finish, below is the javascript method :
/**
* Show result stored in data on html page
* @param data JSON data send by ajaxCheckMailInLDAP in controller.
*/
function checkLdapMail(data) {
console.log("checkLdapMail()");
document.getElementById('selecttype').value=0;
document.getElementById('create_status_ko').style.display='none';
document.getElementById('create_status_ok').style.display='none';
document.getElementById('create_status_info').style.display='block';
if (data.text == "KO") {
document.getElementById('create_status_info').style.display='none';
document.getElementById('create_status_ko').style.display='block';
document.getElementById('create_status_ko').textContent= data.mail.toString() + " existe deja dans le LDAP !";
}
if (data.text == "OK") {
document.getElementById('create_status_info').style.display='none';
document.getElementById('create_status_ok').style.display='block';
document.getElementById('btnSubmit').disabled = false;
}
if (data.text == "EMPTY") {
document.getElementById('create_status_info').style.display='none';
document.getElementById('create_status_ko').style.display='block';
document.getElementById('create_status_ko').textContent= "le rne est vide !";
}
console.log("checkLdapMail() : end");
}
To make it works, I use the parameter name data.An other important things, I used Grails 2.4.4 to make this example.
I hope it will help you in your developpement.
