CODEWITHSUNDEEP
javascriptjsongrailscontrollerrender
Alexandre Bourlier
Alexandre Bourlier

Reputation: 4118

Grails - render Map from controller via Ajax using JSON

I know this is a recurrent/classical topic but I did not found anything that helped me so far. I am trying to render a Map from my controller. This results from an Ajax request and is supposed to be "eaten" by a Javascript function 'onSuccess'.

Here is my Javascript and .gsp view: 

<g:javascript>
function updateVideoLoad(e) {
var map = eval("("+e.responseText+")") // evaluate the JSON
$('#resultsChecker').html(map.urlAccepted + ' - ' + map.provider + ' - ' + map.videoId + ' - ' + map.videoTag)
}
</g:javascript>
<g:formRemote name="myForm" update="" url="[controller: 'project', action:'addVideo']" onSuccess="updateVideoLoad(e)">        
    ...      
</g:formRemote>

Here is my controller:

    import grails.converters.JSON

class ProjectController {

    def addVideo() {
       ...
    def videoMap = [urlAccepted: videoList[0], provider: videoList[1], videoId: videoList[2], videoTag: videoList[3]]
    render videoMap as JSON
    }

It looks to me exactly as the example provided in the Grails documentation. However it does not work. On the browser console, I get:

Uncaught ReferenceError: e is not defined

from my g:remoteForm.

Any suggestion is most welcome. Thank you for your help.

Upvotes: 0

Views: 3560

Answers (4)

Carlos MR
Carlos MR

Reputation: 1

I had the same problem, but I'm using Dojo.

If you use dojo, you shoud use the variable name 'response':

onComplete="updateVideoLoad(response)"

It works fine for Dojo.

Upvotes: 0

Peter
Peter

Reputation: 29837

This appears to be a documentation bug. If using JQuery (the default as of Grails 2.0) The variable should be 'data' not 'e' and it will contain your JSON object that you returned from your controller, and there is no need to eval or parse it like in the docs.

Upvotes: 0

Alexandre Bourlier
Alexandre Bourlier

Reputation: 4118

This seems to be working: 

<g:formRemote name="myForm" update="" url="[controller: 'project', action:'addVideo']" onComplete="updateVideoLoad(XMLHttpRequest)">

Is there a place where to get documentation on those javascript events (onComplete, onSuccess, ...) ?

Upvotes: 1

OverZealous
OverZealous

Reputation: 39560

I'm guessing here, but it looks like a mistake in the documentation. I would expect that this part:

 onSuccess="updateVideoLoad(e)"
                           ^^^

Should really be:

 onSuccess="updateVideoLoad(data,textStatus)"
                           ^^^^^^^^^^^^^^^^^

Looking at the generated code (under Grails 2.0), these are the variables used in the returned:

<form onsubmit="jQuery.ajax({type:'POST',data:jQuery(this).serialize(), url:'/project/addVideo',success:function(data,textStatus){updateVideoLoad(e);},error:function(XMLHttpRequest,textStatus,errorThrown){}});return false"
    method="post" action="/project/addVideo" id="myForm">

Look at the success property in the generated code.

Upvotes: 1

Related Questions