how to pass a javascript var value to a Grails controller?

Question

I have found the following javascript code to get browser window size and it works great!

<script type="text/javascript">
<!--

 var viewportwidth;
 var viewportheight;

 // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight

 if (typeof window.innerWidth != 'undefined')
 {
      viewportwidth = window.innerWidth,
      viewportheight = window.innerHeight
 }

// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
 else if (typeof document.documentElement != 'undefined'
    && typeof document.documentElement.clientWidth !=
     'undefined' && document.documentElement.clientWidth != 0)
 {
       viewportwidth = document.documentElement.clientWidth,
       viewportheight = document.documentElement.clientHeight
 }

 // older versions of IE
 else
 {
       viewportwidth = document.body.clientWidth,
       viewportheight = document.body.clientHeight
 }
document.write('<p>Your viewport width is <b>'+viewportwidth+'x'+viewportheight+'</b>.</p>');
//-->
</script>

Now I need to pass it to a Grails controller so I can resize a image according to screen size.

which is built using:

<div align="center" valign="middle">
<img src="${createLink(controller:'chart', action:'buildChart')}" />
</div>

How can I do so? Thanks in advance!

Answer 1

If you choose to use jQuery you could write a controller that returns your image, something like this in your html:

<img id="picture"/>
....
....
<g:javascript>
    // Load something when DOM is fully loaded
    $(document).ready(function() {
       var width = $(window).width()
       var height = $(window).height()
       $('img#picture').attr('src','${createLink(controller: 'image', action: 'resize')}?width='+width+'&height='+height)
   })
</g:javascript>
....
</body>

And some controller code:

class ImageController {

  def resize = {
     def width = params.int('width')
     def height = params.int('height')
     // ... resize your image and return your image in the output stream
  }
}

The above is entirely off the top of my head, so you have to fill in the blanks :-)

Happy hacking.

Answer 2

Use javascript to add hidden form fields containing the numbers you want. From with in the grails controler use the request.getParameter("fieldName") to retrieve the values in the form of a string then convert to an int and do your resizing.

Answer 3

createLink tag will allow params to be passed on that call to the controller action. Have your javascript determine the values and then plug them into hidden variables that can be referenced by the createLink tag. jQuery has some great options for easily accessing DOM elements.

For example, your img element could look like this: <img src="${createLink(controller:'chart', action:'buildChart', params:\\"['vpWidth' : document.getElementById(\\'vpWidth\\').value, 'vpHeight': document.getElementById(\\'vpHeight\\').value]\\")}" />

We use a similar technique to build remoteFunction method calls with Grails and jQuery. You may have to adjust the above example, it is untested.