PDA

View Full Version : advice needed



tmyonline
17-08-2012, 01:18 AM
Hello,

I'm a newbie at grails. I'm wondering which Javascript library is best to handle Ajax, especially in the context of grails 2.0.1.

My current application makes use of jQuery. It would be nice if jQuery could handle Ajax on grails 2.0 but I'm open to other libraries as well.

I was searching for Ajax examples on Google but have not seen anything useful, especially for grails 2.0.

Any idea ?

Many thanks.

Tommy

dave
15-09-2012, 02:50 PM
Grails 2 uses jQuery as its default javascript library, stick with jQuery and the already present functions in Grails and you'll soon be Ajax'ifying your apps.

Check out the Grails tags such as remoteFunction http://grails.org/doc/latest/ref/Tags/remoteFunction.html to see how you can very easily trigger an an Ajax call and update a portion of your webpage.

grailsgk
22-09-2012, 06:50 PM
Grails 2 uses jQuery as its default javascript library, stick with jQuery and the already present functions in Grails and you'll soon be Ajax'ifying your apps.

Check out the Grails tags such as remoteFunction http://grails.org/doc/latest/ref/Tags/remoteFunction.html to see how you can very easily trigger an an Ajax call and update a portion of your webpage.

Has any one been able to make http://grails.org/AJAX-Driven+SELECTs+in+GSP Country City dropDown to work for grails 2.0.3?
I have added the submit button cntDrop.gsp because , I could not update the city dropdown by changing the country drop down by ajax. But if I click the
submit button after changing the country drop down, then city drop down is update. What do i need to do to make the ajax work without a
submit button? I am just usiing the default jquery for grails 2.0.3.

CountryController:
package cc

import grails.converters.*
class CountryController {
def scaffold = cc.Country

def cntDrop = {

[countryList: Country.list(params)]
}

def ajaxGetCities = {
def country = Country.get(params.cntName)
//render(template: 'countrySelection', model: [r:country])
render(view: 'cntDrop', model: [c:country?.cities])
//render country?.cities as JSON
//render"my ${params?.cntName} ' ' ${country?.name} country"
}
}

cntDrop.gsp:

<html>

<head>
<g:javascript src="myjs.js" />
<g:javascript library="jquery" />
<r:layoutResources/>

</head>
<body>
<g:form method="post" >
<g:select
name="cntName"
from="${cc.Country.list()}"
noSelection="['':'Choose country']"
optionKey="id"
optionValue="name"
value="${country?.id}"
onchange="${remoteFunction(
controller:'Country',
action:'ajaxGetCities',
params:'\'country.id=\' + escape(this.value)',
onSuccess: 'updateCity(e)'
)}"
/>
</br>
</br>

<fieldset class="buttons">
<g:actionSubmit class="save" action="ajaxGetCities" value="${message(code: 'default.button.cnt.label', default: 'drop')}" />
</fieldset>
</br>
</br>

<g:select name="city"
from="${c}"
optionKey="id"
id="city.name"/>

</g:form>

</body>

</html>

myjs.js file:
//<g:javascript>
function updateCity(e) {
// The response comes back as a bunch-o-JSON
var cities = eval("(" + e.responseText + ")") // evaluate JSON
if (cities) {
var rselect = document.getElementById('city') // Clear all previous options
var l = rselect.length
while (l > 0) {
l--
rselect.remove(l)
} // Rebuild the select
for (var i=0; i < cities.length; i++) {
var city = cities[i]
var opt = document.createElement('option');
opt.text = city.name
opt.value = city.id
try {
rselect.add(opt, null) // standards compliant; doesn't work in IE
}
catch(ex) {
rselect.add(opt) // IE only
}
}
}
}
// This is called when the page loads to initialize city
var zselect = document.getElementById('country.name')
var zopt = zselect.options[zselect.selectedIndex]
${remoteFunction(controller:"country", action:"ajaxGetCities", params:"'id=' + zopt.value", onComplete:"updateCity(e)")}
//</g:javascript>


grailsgk