g:select using two combobox in grails - mysql

Question

Hi I'm trying to list shops using two dropdown combobox. İf you're not select country or city list all shops. Other way list according to city country or both of them. By the way I didn't create controller I generate tehm using generate-all.
here is my view;
<g:form action="index" method="POST">
<div class="fieldcontain">
<g:select name="ddlCountry" noSelection="[null:message(code:'default.select.label',default:'Seçiniz...')]"
from="['UK', 'NL', 'DE']"
value="${params.ddlCountry}"/>
<g:select name="ddlCity"
from="['AMSTERDAM', 'Erfurt', 'Manchester','London']"
value="${params.ddlCity}"/>
<input class="btn btn-danger" type="submit" value="Listele" />
<g:each in="${shopList}" status="i" var="shopInstance">
<tr class="${(i % 2) == 0 ? 'even' : 'odd'}">
<td>
<g:link controller="shop" action="show" params="[id:shopInstance.id]">
${fieldValue(bean: shopInstance, field: "shopName")}
</g:link>
</td>
<td>${fieldValue(bean: shopInstance, field: "shopAdress1")}</td>
<td>${fieldValue(bean: shopInstance, field: "shopPostcode")}</td>
<td>${fieldValue(bean: shopInstance, field: "shopCity")}</td>
<td>${fieldValue(bean: shopInstance, field: "shopCountry")}</td>
<td>${fieldValue(bean: shopInstance, field: "shopDateEdited")}</td>
</tr>
</g:each>
</div>
</g:form>
and here is Shop controller index
def index(Integer max) {
params.max = Math.min(max ?: 10, 100)
if(params.ddlCountry || params.ddlCity) {
def shops = Shop.withCriteria {
if (params.ddlCountry) {
like('shopCountry', '%${params.ddlCountry}%')
}
if (params.ddlCity) {
like('shopCity', '%${params.ddlCity}%')
}
}
[shopList:shops]
}
else{
respond Shop.list(params), model:[shopCount: Shop.count()]
}
}
It's listed all shops every time. When I click button page is refreshing but nothing happening

Answer 1

Seems like there is a lot to learn:
Create a new template/file inside myController folder called _index.gsp
inside it put this bit
<g:each in="${shopList}" status="i" var="shopInstance">
<tr class="${(i % 2) == 0 ? 'even' : 'odd'}">
<td>
<g:link controller="shop" action="show" params="[id:shopInstance.id]">
${fieldValue(bean: shopInstance, field: "shopName")}
</g:link>
</td>
<td>${fieldValue(bean: shopInstance, field: "shopAdress1")}</td>
<td>${fieldValue(bean: shopInstance, field: "shopPostcode")}</td>
<td>${fieldValue(bean: shopInstance, field: "shopCity")}</td>
<td>${fieldValue(bean: shopInstance, field: "shopCountry")}</td>
<td>${fieldValue(bean: shopInstance, field: "shopDateEdited")}</td>
</tr>
</g:each>
Change this to:
<!-- add onChange function to select you could look up item on change through jquery instead-->
<g:select name="ddlCity"
from="['AMSTERDAM', 'Erfurt', 'Manchester','London']"
value="${params.ddlCity}" onChange="verifyCity(this.value)"/>
<input class="btn btn-danger" type="submit" value="Listele" />
<!-- put a wrapper div ID around actual results -->
<div id="results">
<!-- make it render template now the controller action renders same content for this bit -->
<g:render template="/myController/index" />
</div>
<!-- END Wrapper -->
</div>
<script>
//Write some java script to handle the actions clicked
//VerifyCity will work on city click
//Hopefully this should be all it needs it gets a value builds a data array passes it to load results
function verifyCity(value) {
//
var data={ddlCity:value}
loadResults(data);
}
//Same as above for country
function verifyCountry(value) {
var data={ddlCountry:value}
loadResults(data);
}
//This runs a jquery post to the CONTROLLERNAME - define this and your action
//when it has a success it updates results DIV with the content
function loadResults(data) {
$.ajax({timeout:1000,cache:true,type: 'post',url: "${g.createLink(controller: 'CONTROLLERNAME', action: 'index')}",
data:data,
success: function(output) {
$('#results').html(output);
}
});
</script>
The segment that displayed results now in its own template, when it renders normally it calls in template. When ajax call is made it renders that specific template.
Now some changes to your controller
def index(Integer max) {
params.max = Math.min(max ?: 10, 100)
if(params.ddlCountry || params.ddlCity) {
def shops = Shop.withCriteria {
if (params.ddlCountry) {
like('shopCountry', '%${params.ddlCountry}%')
}
if (params.ddlCity) {
like('shopCity', '%${params.ddlCity}%')
}
}
//If request is coming in via ajax load in a template of the actual results so the bit that is within div id='results' should be actually a template.
if (request.xhr) {
render (template: 'myController/index', model:[shopList:shops])
return
}
//This will handle non ajax calls and will load in the index.gsp which includes the site mesh
[shopList:shops]
return
}
//no need for else just use return to stop a if statement in a controller
respond Shop.list(params), model:[shopCount: Shop.count()]
return
}
The controller will behave as it normally did with the exception of if if (request.xhr) which tells the controller if this is an ajax call render template _index.gsp rather than index.gsp
The difference between those two are that index.gsp has layout="main" this is the sitemesh that loads in the styles of the site. the template is plain and can be overloaded a segment of an existing normal page rendered.