CODEWITHSUNDEEP
ajaxgrailshtml
recoInrelax
recoInrelax

Reputation: 707

Grails refresh div

I have something like this in my website:

<body>
<div id="1">
content1
</div>
<div id="2">
content2
</div>

<g:render template="/layouts/aa1"/>

<g:form name="myForm" action="myaction">
<g:submitButton name="update" value="Update" />
</g:form>
</body>

My aa1 layout is something like this:

<div id="3">
       <g:each in="print">
       ${it.carModel}
       </g:each>

</div>

And the controller is:

def updateDiv = {
def max = 20
def offset = 0 
   if(params=["myForm"]){
       def print = Cars.list(max: max, offset: offset + 10)
   }
render(template:'aa1', [print: print])
}

What i wanna do is, when i click 'Update', g:render is called again and updated with ajax (update only that part), and the values change. Each time is clicked, the next 20 cars are shown. How can i accomplish that? Am i in the right direction?

Upvotes: 2

Views: 6028

Answers (1)

gotomanners
gotomanners

Reputation: 7906

Grails has a tag formRemote that does this for you. Basically, instead of using the regular form tag, you use a formRemote tag, specifying the controller and action to invoke and the dom element to update with the results. You can also look at the submitToRemote tag which does something similar.

I've stubbed out some code below s oset you on the right direction. Its not tested so there might be errors in it

CONTROLLER:

def updateDiv = {
    def max = 20
    def offset = 0 

    if(params=["myForm"]){
       def print = Cars.list(max: max, offset: offset + 10)
    }

    render(template:'aa1', collection:print, var:'car')
}

GSP:

<body>
    <div id="1">
        content1
    </div>
    <div id="2">
        content2
    </div>

    <g:formRemote name="myForm" on404="alert('not found!')" update="3"
              url="[ controller: 'YourControllerName', action:'updateDiv' ]">
        Book Id: <input name="id" type="text"></input>
    </g:formRemote>

    <div id="3">
         <g:render id="" template="/layouts/aa1" collection="${print}"/>
    </div>
</body>

TEMPLATE:

${car.carModel}

Upvotes: 4

Related Questions