0

I am a novice with ajax in Grails. I want to try to execute a controller method from gsp-code from ajax.

This is part of my gsp-code:

<g:select
  optionKey="id" name="region.id" id="region" from="${region}" noSelection="[null:' ']"
  onchange="categoryChanged(this.value);"
></g:select>
<div>
  <b>Sub-Category: </b>
  <span id="subContainer"></span>
</div>
                <script>
                    function categoryChanged(regionId) {
                        $.ajax({type:'POST',data:'regionId='+regionId, url:'restorator/region/categoryChanged',success:function(data,textStatus){jQuery('#subContainer').html(data);},error:function(XMLHttpRequest,textStatus,errorThrown){}});
                    }
                </script>

In the url parameter of the $ajax call: restorator is a package, region is a controller in it and categoryChanged is an action.

This is my controller:

class RegionController {

    def ajaxGetCities = {
        println "hello"
        def region = Region.get(params.id)
        render region?.cities as JSON
    }

    def categoryChanged(long regionId) {
        println "test"
        Region region = Region.get(regionId)
        def subCategories = []
        if ( region != null ) {
            subCategories = City.findAllByRegion(region, [order:'cityName'])
        }
        render g.select(id:'subCategory', name:'subCategory.id',
            from:subCategories, optionKey:'id', noSelection:[null:' ']
        )
    }
}

In the head part I've added <g:javascript library='jquery' /> When I try to change option in the select tag I don't see the output to console, which should be shown from theprintln "test" line inside the controller. This means that the controlloer function is never actually called, what am I doing wrong ? How do I make sure this function call actually happens ?

2 Answers 2

1

Right click on the page,Inspect Element and see if there are any errors in console.

Also, you should specify URL this way:

url: '${createLink(controller: 'region', action: 'categoryChanged')}',
Sign up to request clarification or add additional context in comments.

Comments

0

It will be less code if you use the grails remoteLink function.

<g:remoteLink action="makeProduct" id="${productInstance.id}" before="showSpinner('#spinner1')" onComplete="hideSpinner('#spinner1')" update="product_status">Make Product</g:remoteLink>
<div id="product_status"></div>

This code will request the action asynchronously and update the product_status div with the resulting HTML from the action. You can also add spinners on the page to give the user some feedback.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.