Question

I have one g:select with an onchange event that fires a remoteFunction that is calling the request method as well, however, the callback JS function isn’t been calling.

This is the g:select:

<g:select id="categories"
          name="categories"
          from="${Category.findAll('from Category where master is null')}"
          noSelection="['':'- Selecione -']" optionKey="id" optionValue="description"
          onchange="${remoteFunction(
                  controller: 'event',
                  action: 'subCategoriesJSON',
                  params:'\'id=\' + escape(this.value)',
                  onSuccess: 'updateSubs(data,textStatus)'
          )}"
/>

The subCategoriesJSON is called as well, but there is no way to remoteFunction calls after that the updateSubs function. My page is rendering the scope of the function correctly on the head tag.

This is the function:

<script type="text/javascript">
    $(document).ready(function() {
        function updateSubs(data, textStatus) {
            alert('call me!!!');
            var subs = eval("(" + e.responseText + ")");

            if (subs) {
                $("span#saida").html(subs);
            }
        }
    });
</script>

Any clue will be very welcome. Thanks a lot!

Answer 1

It looks like updateSubs is defined as a local function, which means it isn’t accessible from the global scope. Basically move your updateSubs function out of the $(document).ready() – it doesn’t need to be there really as there is no need for your code to wait until the dom is ready before defining that function.

That should solve your main problem, however you’ll have to edit your code further as you are trying to access e.responseText when you have no access to a variable named e – this will just trip an error until it is fixed. I’ve commented the problem code for now.

Anyway, once updateSubs is in the global scope the onSuccess handler should be able to access it.

<script type="text/javascript">
    function updateSubs(data, textStatus) {
        alert('call me!!!');
        //var subs = eval("(" + e.responseText + ")");
        //if (subs) {
        //    $("span#saida").html(subs);
        //}
    }
    // I'm not sure if you actually need this ready function..?
    $(document).ready(function() {
        // if you define a function in here it will only be accessible 
        // from within the scope of this function.
    });
</script>

For further information about function scope, have a read about Nested functions and closures.