How to pass JavaScript variable to g:remoteFunction "update" property?

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.

Alexander Tokarev · Accepted Answer · 2014-01-12 18:26:35Z

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/

answered Jan 12, 2014 at 18:26

Alexander Tokarev

2,7632 gold badges21 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

uladzimir Over a year ago

Q and offtop: Is data attributes a way to rid of groovy code in js? There are many situations when I need a param from server and put it to the inline js. Rendering of html only and data tags looks like a charm :)

Alexander Tokarev Over a year ago

Yes, of course. Data attributes were introduced in HTML5 to store custom data associated with the element. You can read about it here: w3schools.com/tags/att_global_data.asp

Dónal · Accepted Answer · 2014-01-12 15:31:38Z

0

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

answered Jan 12, 2014 at 15:31

Dónal

188k177 gold badges590 silver badges851 bronze badges

2 Comments

mateusz.s Over a year ago

I tried it both with update="${myID}" and update="{myID}" but unfortunately it didn't work.

Dónal Over a year ago

@mateusz.s it's the 3rd param that you pass to messageKeyPress that you need to change, i.e. change it from '#myID' to 'myID'

Collectives™ on Stack Overflow

How to pass JavaScript variable to g:remoteFunction "update" property?

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related