How to pass or use variable from GSP in Javascript

Question

I have below line in my grails gsp file.

    <div class="pagination">
        <g:paginate total="${lotCount ?: 0}" />
    </div>

I want to pass lotCount value to one of my javascript named area-switcher.js file to further use it. How can I do this?

<g:javascript> var theId = ${lotCount} </g:javascript>

and try below in my js file for testing

alert(theId);

but it doesn't work. Got error like ReferenceError: theId is not defined. Please help.

start by putting speech marks around the id call so var theId = "${lotCount}"; — V H
– V H, Commented Mar 26, 2017 at 19:36

Mike W · Accepted Answer · 2017-03-27 09:44:10Z

1

Use a hiddenField:

<g:hiddenField name="lotCount" value="${lotCount}" />

<div class="pagination">
    <g:paginate total="${lotCount ?: 0}" />
</div>

answered Mar 27, 2017 at 9:44

Mike W

3,9622 gold badges13 silver badges21 bronze badges

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

Comments

iVetal · Accepted Answer · 2017-03-27 13:50:38Z

Your solution should work.

Just ensure that in source of generated html page line

<g:javascript> var theId = ${lotCount} </g:javascript>

is placed before line which includes area-switcher.js

<script type="text/javascript" src="area-switcher.js">

Besides that, there are two more options to pass some value from .gsp to javascript file (examples use jQuery):

gsp (here div, span, input, other tags could be used):

<div id="countElem" data-count="${count}">

js(jQuery used here):

var count = $("#countElem").data('count');

gsp:

<g:hiddenField name="countElem" data-count="${count}"/>

js(jQuery used here):

// hidden field will have name and id equals to countElem
var count =  $("#countElem").val();