CODEWITHSUNDEEP
javascriptgrailsgsp
Mike Milkin
Mike Milkin

Reputation: 4269

How I access a variable from JavaScript and Grails?

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?

Let's say I want onresize to fit all the objects on the screen. Without making a database call and refetching the entire list from Ajax...

Let's 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) // Pseudocode
            list.subList() // Pseudocode
    }
    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?

The $reportList is populated by POJO as JSON conversion...

Upvotes: 1

Views: 10715

Answers (4)

Mike Milkin
Mike Milkin

Reputation: 4269

I figured out my problem. Basically if you are using POJO in Grails the Grails as JSON conversion is not very smart. All it does is a toString on the object instead of potentially looking at all the public accessors, etc.

It is kind of disappointing, but basically I need to create the JSON conversion in the toString method of my POJO.

Upvotes: -1

Gregg
Gregg

Reputation: 35864

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.

Upvotes: 0

Matt Ball
Matt Ball

Reputation: 359826

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.

Upvotes: 4

Mart&#237;n Schonaker
Mart&#237;n Schonaker

Reputation: 7305

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>""" %>

Upvotes: 0

Related Questions