CODEWITHSUNDEEP
jquerygrails
user903772
user903772

Reputation: 1562

Grails remotefunction to populate dropdownlist with Jquery

am using jquery as the ajax library for my grails application. I got a dropdownlist that is populated from another dropdown but no value appear.

GSP:

  <label for="countryddl" >Country:</label>
  <g:select name="countryddl" id="countryddl" from="${locations.country}"  
            keys ="${locations.country}"
            noSelection="['':'Select one...']"
           onChange="${remoteFunction( action:'updateProvince',
                                          params: '\'id=\'+escape(this.value)',
                                          update: [success: 'provinceddl'] )}"

  ></g:select> <br/><br />
    <label for="provinceddl" >Province:</label>
  <g:select name="provinceddl" id ="provinceddl" noSelection="['':'Select one...']" from=""></g:select>

Controller:

def updateProvince = {
        def country = params['id']
        def locations = Location.findAllByCountry(country)
        render locations.province as JSON

    }

Upvotes: 0

Views: 3948

Answers (3)

coderLMN
coderLMN

Reputation: 3076

GSP:

  <label for="countryddl" >Country:</label>
  <g:select name="countryddl" id="countryddl" from="${locations.country}"  
       keys ="${locations.country}"
       noSelection="['':'Select one...']"
       onChange="${remoteFunction( action:'updateProvince',
                     params: '\'id=\'+escape(this.value)',
                     update: [success: 'provinceddl'] )}"

  ></g:select> 
  <br><br>
  <div id="provinceddl">
      <p>Provinces will be loaded here according to country selected</p>
  </div>

Controller:

def updateProvince = {
        def country = params['id']
        def locations = Location.findAllByCountry(country)
        render(template:'result', model:[provinces: locations.collect{it.province}]
    }

_result.gsp

<label for="provinceddl" >Province:</label>
    <g:select name="provinceddl" noSelection="['':'Select one...']" from="${provinces}">
</g:select>

Upvotes: 4

Xeon
Xeon

Reputation: 5989

The javascript function to update select:

function updateSelect(e, selectId) {
// The response comes back as a bunch-o-JSON
var json = eval("(" + e.responseText + ")") 

if (json) {
    var rselect = document.getElementById(selectId);

    // Clear all previous options
    var l = rselect.length;

    var selectedKey = "undefined";
    while (l > 0) {
        l--
        var value = rselect.options[l].value;
        var attr = rselect.options[l].getAttribute("selected");
        if(attr != null && attr.trim().length > 0) {
            selectedKey = value
        }
        rselect.remove(l);
    }

    // Rebuild the select
    for ( var i = 0; i < json.length; i++) {
        var j = json[i];
        var opt = document.createElement('option');
        opt.text = j.name;
        opt.value = j.id;
        if(j.id == selectedKey) {
            opt.setAttribute('selected', 'selected');
        }
        try {
            rselect.add(opt, null) // standards compliant; doesn't work in
            // IE
        } catch (ex) {
            rselect.add(opt) // IE only
        }
    }
}

}

On the GSP:

<tr>
                <td>Teacher:</td>
                <td><eb:select name="teacher" from="${ availableTeachers }"
                        optionKey="id" optionValue="fullName" id="teacher"

                        onchange="${remoteFunction(
                            controller:controllerName, 
                            action:'ajaxGetClassesForTeacher', 
                            params:'\'id=\' + escape(this.value)', 
                            onComplete:'updateClasses(arguments[0])')}"
                         /></td>
            </tr>
            <tr>
                <td>Class:</td>
                <td><eb:select name="schoolClass" from="${ availableClasses }"
                        optionKey="id" optionValue="name"
                        id="schoolClass"  /></td>
            </tr>

<r:script disposition="defer">

function updateClasses(e) {
    updateSelect(e, "schoolClass");
}

</r:script>

In the controller:

def ajaxGetClassesForSchool(params) {
    School school = School.get(params.id)
    def classes = SchoolClass.findAll() {
        eq("school", school)
    }

    classes = classes.collect() {
        new NameIdGSP(id:it.id, name:it.name)
    }
    def json = classes as JSON
    return json
}

Where NameIdGSP is a simple groovy class containing only int id and String name properites

Upvotes: 1

James Kleeh
James Kleeh

Reputation: 12228

The problem is update: [success: 'provinceddl'] is excepting to set the HTML attribute of an element with what is rendered. What you probably want is to create a wrapping div and update that div. Then render that whole <g:select /> again with that data. If this doesn't answer it for you, I'll edit later with an example.

Upvotes: 0

Related Questions