Question

我在我的视图区域中遇到此问题，其中我的<g:select>标记具有onChange属性，以检索引用所述标记的所选值的数据。不幸的是，我们在<g:select>中包含了<g:formRemote>标记，因此可以通过<g:formRemote>的URI检索数据，而无需刷新页面。

<!-- The g:formRemote of the view -->
<g:formRemote name="formRemote" uri:[controller:'test', action:'functionCall']>
   <g:select name="selectedValue" from="${['AA','BB']}"/>
   ${returnData}
</g:formRemote>

//The closure where the formRemote will be calling [TestController.functionCall]
def functionCall(){
   println 'entered'
   def returnData = ''
   if(params.value == 'AA')
      returnData = 'aaa'
   else if(params.value == 'BB')
      returnData = 'bbb'       

   [data:returnData]
}

问题是我们找不到一种方法，可以在更改<g:formRemote>的值时，将模型数据从控制器返回到视图[引用<g:select>]。

Answer 1

您的选择标记不必位于formRemote标记内，带有remoteFunction调用的常规表单标记将起到作用。

来自http://grails.org/AJAX-Driven+SELECTs+in+GSP：

在gsp中选择标记：

<form>
    <g:select
        optionKey="id" optionValue="name" name="country.name" id="country.name" from="${Country.list()}"
        onchange="${remoteFunction(
            controller:'country', 
            action:'ajaxGetCities', 
            params:'\\'id=\\' + escape(this.value)', 
            onComplete:'updateCity(e)')}"
    ></g:select>
    <g:select name="city" id="city"></g:select>
</form>

gsp中的javascript函数将数据发送到grails控制器：

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

grails controller：

import grails.converters.*
class CountryController {

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

Answer 2

我们知道我们不需要<g:formRemote>标签来使理论发挥作用。我们缺少onChange="${remoteFunction ...}"的{{1}}参数，其格式如下：

<g:select tag>

同样位于<g:select name="selectedValue" from="${['AA','BB']}" optionKey="<the id of the model with reference to line#9>" onChange="${remoteFunction( controller:'test', action:'functionCall', update:[success:'updateDiv'], params:'\'id=\' + escape(this.value)', onComplete='displayVal(this)')}"/>中的updateDiv负责通过闭包.gsp从控制器保持要呈现的视图。

functionCall

具有此内容的TestController.functionCall：

<div id="updateDiv"></div>

Grails g：formRemote自动检索

2 个答案: