0

私はGrailsフレームワークに取り組んでいます。1 対多の関係を持つ 2 つのドメイン クラス Country と City があります。私の考えでは、ページが読み込まれると、gsp には 2 つの選択ボックスが表示されます。1 つは国を入力し、任意の国を選択すると、その国の都市が 2 番目の選択ボックスに入力されます。ここでは、grails ajax (jquery) を使用しています。

import grails.converters.JSON

class CountryController {

    def index() { redirect action: 'getCountries' }

    def getCountries() {
            def countries = Country.list()
            render view:'list', model:[countries:countries]
    }

    def getCities() {
        def country = Country.get(params.id)
        render country?.city as JSON
    }
}

getCities アクションが起動されると、次のように JSON を取得しています。

[
   {
      "class":"com.samples.City",
      "id":3,
      "country":{
         "class":"Country",
         "id":2
      },
      "description":"California",
      "name":"California"
   },
   {
      "class":"com.samples.City",
      "id":4,
      "country":{
         "class":"Country",
         "id":2
      },
      "description":"Dalls",
      "name":"Dalls"
   }
]

しかし、私の gsp ページから、eval 関数で JSON を評価すると、「未定義」が返されます。

<g:select name="countrySelect" from="${countries}" 
    optionKey="id" optionValue="name" 
    noSelection="[null:'Select Country']"
    onchange="${
           remoteFunction(action: 'getCities',
               update: message,
               params: '\'id=\' + this.value',
           onSuccess:'updateCity(data)')
          }"/>
    <br/>
    City :: <g:select name="city" id="city" from=""></g:select>

タグ内の次のコード

<head>

    <g:javascript library="jquery"></g:javascript>
    <g:javascript>
        function updateCity(data) {
            alert('done');
            var cities = eval("(" + data.responseText + ")")    // evaluate JSON
            alert(cities)
            var rselect = document.getElementById('city')

            // Clear all previous options
            var l = rselect.length
            while (l > 0) {
                l--
                rselect.remove(l)
            }

            //build cities
            for(var i=0; i < cities.length; i++) {
                var opt = document.createElement('option');
                opt.text = cities[i].name
                opt.value = cities[i].id
                try{
                    rselect.add(opt,null) //For Non IE
                }catch(ex){
                    rselect.add(opt) //For IE
                }
            }

        }
    </g:javascript>
    <r:layoutResources />
</head>

問題がどこにあるかを見つけるのを手伝ってくれる人はいますか?

4

1 に答える 1

1

JSONデータに対してJQueryの各メソッドを使用して解決しました。

<g:javascript>
        function updateCity(data) {

            var rselect = document.getElementById('city')
            $.each(data, function(index, element) {
                //alert(element.name);

                var opt = document.createElement('option');
                if(element.name !== undefined){
                    opt.text = element.name
                    opt.value = element.id

                    try{
                        rselect.add(opt,null) //For Non IE
                    }catch(ex){
                        rselect.add(opt) //For IE
                    }
                }               
             });

        }
    </g:javascript>
于 2013-08-14T06:40:19.697 に答える