Grails RemoteFunction params syntax

I'm trying to pass a couple of parameters to a remoteFunction in grails but I'm struggling to format it correctly

I want to pass in the value of a piece of data on the page plus the value of the text box that I have just tabbed out of, so in my onblur I have something along the lines of :

onblur=${remoteFunction(action:'dave',  update:'pack'+it.id,
         params:[denom:document.getElementById(denomValue+${it.id}).value ,
         amount:this.value ])}

This doesn't compile - neither do any permutations I can come up with with varying numbers of single quotes and escape characters ..

I think what is really stumping me is thatI don;t really understand what I am trying to create here. Is it like using JSP code to create JavaScript which iwill be later executed? When does this expression get evaluated - it is at the time the page is compiled - or is a=it at the time that oblur gets called?

Any help greatly appreciated.

It looks like you've mixed up server-side code with client-side code.

The Grails code will be evaluated when the page is being "built" to be sent to the client browser.

The Javascript code will be evaluated once the page has been delivered to the browser.

With this in mind let's take a look at your onblur assignment:

onblur=${remoteFunction(
         action:'dave', 
         update:'pack'+it.id, 
         params: [denom: document.getElementById(denomValue+${it.id}).value, 
                  amount: this.value ])}

Given the ${remoteFunction...} call is a Grails tag, it will be evaluated on the server, generate a fixed string, then be sent to the client. Everything inside the call must be valid Groovy code.

Look at the params map, you've added some Javascript in the denom value, inside the Groovy code:

document.getElementById(denomValue

then you try to add a value from Groovy

+${it.id}

then some Javascript again

).value

The Groovy compiler will try to evaluate the Javascript as Groovy code and fail.

If you need to access client-side parameters in Javascript you'll need to handle the Javascript yourself (and not use the remoteFunction tag), for example to handle the remote call:

var path=${createLink(action:'dave',
                      params: [amount:this.value])} 
           + "&denom=" 
           + document.getElementById(denomValue+${it.id}).value

You'll also need to handle the remote response yourself using Javascript to update the 'pack' elements. You could always look at what the remoteFunction call generates, copy it into the page and edit it to do what you want.

HTH

Or you can pass the parameters separated by '&' like

params:'\'param1=\'+this.value+\'&booleanParam2=true\''

You can actually still use the remote function tag, you just have to write the parameters in a javascript object string, so this actually works quite well in stuff that I work with.

var denomValue = document.getElementById(denomValue+${it.id}).value;
onblur=${remoteFunction(
     action:'dave', 
     update:'pack'+it.id, 
     params: '{denom: denomValue, amount: this.value}'
     )}

<button type="button" class="btn btn-success" id="value-pie" onClick="ajaxFunction(this.value)">Confirmar</button>

<script>
function ajaxFunction(id){
     var obs = $("#observacion").val()
     var parameters = { "serieId":id,
                        "observacion":obs
                      }
     <g:remoteFunction controller="control"
                  action="ajax"
                  method="GET"
                  onSuccess="updateModal(data)"
                  params="parameters"/>
}
</script>

I had the same problem but all answers above did not help as the value I want to get are the selected value from the selection dropdown as well as the obj instance inside table that was being iterated. below was the solution.

<g:select
                                             from="${list}" 
                                      optionKey="value"
                                      optionValue="key"

                                      onchange="getValue(this.value, ${instance.id})"/>

    <script type="text/javascript">     
              function getValue(Id1, Id2)
              {

                  $.ajax({
                      type: 'POST',
                      url: '/app/controller/functionToCall',
                      data: { someId: Id1, otherId:Id2},

                  });

              }