如何将JavaScript变量传递给g：remoteFunction“更新”属性？

Question

I have a function in JavaScript that submits a message to a method in a Grails controller and at the same time updates div with myID id.

function messageKeyPress(field,event,messageBox) {
    ...
    var message = $('#messageBox').val();
        <g:remoteFunction action="submitMessage" params="\'message=\'+message" update="myID"/>
    ...
}

I use it like this:

<div id="chatMessages" class="chatMessages"></div>
    <input type="text" id="messageBox" class="messageBox" name="message" onkeypress="messageKeyPress(this,event,'#messageBox');"/>
  <div id="myID">

I would like that function to be reusable being able to update different divs.

I tried:

onkeypress="messageKeyPress(this,event,'#messageBox', '#myID');"

and in JavaScript:

function messageKeyPress(field,event,messageBox, myID) {
...
<g:remoteFunction action="submitMessage" params="\'message=\'+message" update="${myID}"/>

But that didn't work. My question is how to pass a JavaScript variable to Grails g:remoteFunction "update" property.

Answer 1

I suggest you to use jQuery instead. It is bundled by default to Grails projects. As a result, you'll get a neat separation between javascript code and gsp view logic. For instance, application.js might look like this:

(function($) {
    $('.messageBox').on('keypress', function () {
       ...
       var params = {message: $(this).val()};
       var url = $(this).data('url');
       var target = $(this).data('target');
       $.post(url, params, function(response) {
           $(target).html(response);
       });
       ...
    });
})(jQuery);

and your view file:

<input type="text" id="messageBox" 
       class="messageBox" name="message" 
       data-url="${createLink(action: 'submitMessage')}" 
       data-target="#myId"/>
<div id="myID"></div>

You should assign a messageBox css class to every input field you want to have this event listener. And in data-target attribute of every field you can specify a selector for all divs that should be updated.

jQuery is very easy to learn. http://api.jquery.com/

Answer 2

The update attribute should be set to the ID of the element to be updated, not a selector that matches this element. In other words, try this:

onkeypress="messageKeyPress(this,event,'#messageBox', 'myID');" // '#' removed from myID