Grails 3.3.9: Call controller action when checkbox is checked

I am fairly new to Grails and frameworks in general, so this is most likely a very basic problem. The only promising looking solutions I was able to find were working with the Tag, which is apparently deprecated in Grails 3. Similar questions do exist, but all from the time when was still a thing.

I am trying to program a way of displaying products that are grouped in subcategories which are then grouped in categories. When my page loads the subcategories and categories are requested from my database and selection options (Select-tag and checkboxes) are rendered in the view.

When one of the checkboxes representing the subcategories is checked i need to run a database query to get the product information and update an HTML-element by rendering a template for every row I get back. I have a controller action that does all that. My only problem is that I need a way to call the controller action whenever one of the checkboxes is checked.

I could maybe work around it by using actionSubmit and a hidden submit button that is clicked by javascript whenever a checkbox is checked, but that doesn’t seem like a proper solution.

I am probably missing some very basic functionality here but I did already thoroughly search and haven’t come across a proper solution by now, probably because I didn't use the right search terms. I would be so happy, if anyone could help me with this. Thanks a lot already!

Solution

The following example uses a javascript function activated in response to the checkbox being checked/unchecked, the value of which is passed to an action from which you can do whatever with the value of the checkbox, run your query etc. At present the action renders a template to update the view with the database results.

index.gsp

<!DOCTYPE html>
<html>
<head>
    <meta name="layout" content="main" />

    <script type="text/javascript">
        $(document).ready(function(){
            $( '#cb' ).click( function() {
                var checked = $(this).is(":checked");
                $.ajax( {
                    url: "/yourController/yourAction?checked=" + checked,
                    type: "get",
                    success: function ( data ) {
                        $( '#resultDiv' ).html( data )
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        console.log( 'Error rendering template ' + errorThrown )
                    }
                } );
            })

        });
    </script>
</head>
<body>

<div id="resultDiv"></div>

<g:form>
    <g:checkBox name="cb" />
</g:form>

</body>

YourController

class YourController {

    def yourAction() {
        // you may want to do something with the value of params.checked here?
        def dbResults = YourDomain.getStuff()
        render ( template: 'theTemp', model: [dbResults: dbResults] )
    }
}

_theTemp.gsp

<table>
    <caption>Table of stuff</caption>
    <g:each in="${dbResults}" var="aThing">
        <tr>
            <td>${aThing}</td>
        </tr>
    </g:each>
</table>