Grails how to access a variable from javascript

Question

Hi I have a grails variable which is of type JASONList that is rendered in a template

Is there a way to access this list from inside a javascript function.

Lets say I want onresize to fit all the objects on the screen. Without making a db call and re fetching the entire list from ajax ....

Lets say the template does something like this

<g:each var="report" in="${reportList?.myArrayList}">
  <li style="display:inline; list-style:none;">
    <img src="  ${report?.img}">
  </li>
</g:each>
<script type="text/javascript">
function resize(list){
  if(list.size <givenSize) //posudo code
     list.subList() // psudocode
}

window.onresize = resize("${reportList}")
</script>

The problem with this is that for some reason grails gsp does not render "${reportList}" as a list instead it renders it as the string "${reportList}"

I am probably thinking of this problem completely wrong but is there a way to resize these objects or get them through document.getElementById or something of that nature ...

EDIT: the $reportList is populated by POJO as JSON convertion ...

Answer 1

I don't know, but maybe Grails doesn't want to evaluate expressions inside script tags. Dynamically generated scripts is not a very good practice.

But until you find the exact cause, you could try something like this:

<g:each var="report" in="${reportList?.myArrayList}">
  <li style="display:inline; list-style:none;">
    <img src="  ${report?.img}">
  </li>
</g:each>
<%= """<script type=\"text/javascript\">
function resize(list){
  if(list.size <givenSize) //posudo code
     list.subList() // psudocode
}

window.onresize = resize(\"$reportList\")
</script>""" %>

Answer 2

Grails variables only exist on the server side. Javascript runs in the browser (client side). Everything that's sent to the browser is a string, so while you can use Grails to generate a piece of JavaScript like window.onresize = resize("${reportList}"), the browser will only see the string that ${reportList} evaluates to.

That means that, if you use Grails to pass a variable to the resize() JavaScript function, the parameter (list) will only ever be a string - you won't be able to access server-side list methods like list.size or list.subList() because the list variable is no longer a list, it's just a string.

Answer 3

I'm not sure why your ${reportList} is being rendered as ${reportList} because when I do the following:

var t = "${taskList}";

I get the following in my html:

var t = "[com.wbr.highbar.Task : 1, com.wbr.highbar.Task : 4, com.wbr.highbar.Task : 2, com.wbr.highbar.Task : 5]";

That said, you're still going to have issues because JavaScript will have no idea what to do with your reportList. If it is pure JSON, you would need to eval() it so that it gets turned into a JavaScript Object.

Answer 4

I figured out my problem, basically if you are using POJO in grails the grails as JASON conversion is not very smart all it does is a toString on the object instead of potentialy looking at all the public accessors ect ... (kinda disapointing but basicly i need to create the JSON convertion in the toString method of my POJO)