Chained dropdown ajax problem

G

grailsgk

Guest
Hi,
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 a submit button because , I could not make the ajax work . When I click the submit button, the City
drop down get populated depending on the country dropdown.
What do I need to do to make the ajax work without a submit button?

CountryController:
Code: 
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"
    }
}
/*************************************************************/

CityController:
Code: 
package cc

class CityController {
    def scaffold = cc.City
    //def index() { }
}

/*************************************************************/
cntDrop.gsp:
Code: 
<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:
Code: 
//<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>
Thanks
grailsgk
 
Last edited by a moderator:
G

grailsgk

Guest
ajax solution

grailsgk said:
Hi,
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 a submit button because , I could not make the ajax work . When I click the submit button, the City
drop down get populated depending on the country dropdown.
What do I need to do to make the ajax work without a submit button?

CountryController:
Code: 
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"
    }
}
/*************************************************************/

CityController:
Code: 
package cc

class CityController {
    def scaffold = cc.City
    //def index() { }
}

/*************************************************************/
cntDrop.gsp:
Code: 
<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:
Code: 
//<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>
Thanks
grailsgk
Click to expand...

This is the way it worked for me.
Thanks
grailsgk

package cc

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



def cntJqDrop = {

[countryList: Country.list(params)]
//redirect action:ajaxGetCityJqJSON
}

def ajaxGetCityJqJSON = {
def country = Country.findAllById(params.id)
render country?.cities as JSON
}




}


--------------------------------------------------------
cntJqDrop.gsp file

<!DOCTYPE html>
<html>
<head>

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

</head>
<body>

<g:select
name="cntName"
id="country"
from="${countryList}"
noSelection="['':'Choose country']"
optionKey="id"
optionValue="name"
value="${country?.id}"

/>
</br>


<select id="city">

</select>


</body>
</html>
---------------------------------------------------------------

dropDownCtry.js

$(document).ready(function() {


$("#country").change(function() {
dataType: 'json',
$.ajax({

url: "/CountryCity/Country/ajaxGetCityJqJSON",

cache: false,
data: {id: $('#country').val()},



success: function(d) {

displayjaxval(d);

},

complete: function() {

alert("complete " );
}

});

});

});


function displayjaxval(cities) {

if (cities){

var rselect = document.getElementById('city');
var l = rselect.length;

while (l > 0) {
l--
rselect.remove(l);

}
for (var j=0; j < cities.length; j++) {

for (var i=0; i < cities[j].length; i++) {

var city = cities[j]

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
}
}
}
}

}


----------------------------------------
 
You must log in or register to reply here.
Top