jquery - Grails g:formRemote 自动检索

Question

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

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

您的 select 标记不必位于 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>

圣杯控制器：

import grails.converters.*
class CountryController {

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

Answer 2

我们最近知道我们不需要<g:formRemote>标签来让理论起作用。我们缺少以下格式的onChange="${remoteFunction ...}"参数：<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。

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

并且 TestController.functionCall 具有以下内容：

def functionCall(){
   println 'entered'
   def returnData = ''
   if(params.value == 'AA')
      returnData = 'aaa'
   else if(params.value == 'BB')
      returnData = 'bbb'       

   render(view:'<can be a template or an html page>', model:[data:returnData])
}