如何使用远程功能？答案

【问题标题】：how to use remoteFunciton?如何使用远程功能？
【发布时间】：2014-09-17 08:27:29
【问题描述】：

我读到了这个remoteFunction ..

下面是我的代码

我基本上想在货币更改时更改我的用户计划。

喜欢这张图片

    <tr class="borderTop">
    <td class="formLbl topPadding"><label for="currency.id"><g:message code="currency.label"/></label></td>
    <td class="value ${hasErrors(bean: cifInstance, field: 'currency', 'errors')}">
         <g:select name="currency.id"  value="${cifInstance?.currency?.id}" from="${currency}" optionKey="id"  optionValue="${{it.sym }}" 
            onchange="${remoteFunction(
                controller:'singUp', 
                action:'findUserPlanByCurrency', 
                params:'\'id=\' + escape(this.value)', 
                onComplete:'updateUserPlan(e)')}"
         />

    </td>
</tr>

<tr class="borderTop">
    <td class="formLbl topPadding"><label for="noOfUser"><g:message code="max.user.label"/></label></td>
    <td>
        <g:hiddenField name="userPlan" value="${noOfUser?.id}"/>
        <g:hiddenField name="jumlahuser" id="jumlahuser" value="${noOfUser?.noOfUser}"/>
        <g:select name="userplan.id"  value="${noOfUser?.id}" from="${com.teravin.collection.maintenance.UserPlan.findAllByDeleteFlag('N')}" optionKey="id"  optionValue="${{it.noOfUser }}"/>
    </td>
</tr>

下面是我的javascript

function updateUserPlan(e) {
    var userplan = eval("(" + e.responseText + ")") // evaluate JSON
    alert(userplan);
    if (userplan) {
            var rselect = document.getElementById('userplan.id')
                // Clear all previous options 
            var l = rselect.length
            while (l > 0) { 
                l-- 
                rselect.remove(l) 
            }
            for (var i=0; i < userplan.length; i++) {
                var userplan2 = userplan[i]
                var opt = document.createElement('option');
                opt.text = userplan2.name
                opt.value = userplan2.id
                try {
                    rselect.add(opt, null) // standards compliant; doesn't work in IE
                }
                catch(ex) {
                    rselect.add(opt) // IE only
                }
    }

所以当我更改货币时......它将从控制器获得一个值

def findUserPlanByCurrency={
    println "================ "+params
    def currency = Currency.get(params.currency)
    def userplan = UserPlan.findAllByCurrency(currency)
    println "aaaaaaaaaaaaaaaaaaaaaaaaaaa"
    if (userplan) {
        if (!params.id) {
            if (userplan.deleteFlag.equals("N"))
                response.status = 405
            else
                response.status = 409
        }
        else {
            if (params.id.equals(userplan.id.toString()))
                response.status = 200
            else{
                if (userplan.deleteFlag.equals("N"))
                    response.status = 405
                else
                    response.status = 409
            }
        }
    }
    else {
        response.status = 200
    }

    if (params.callback) {
        render "${params.callback}(${params as JSON})"
    }
    else {
        render "${params as JSON}"
    }
}

当我更改货币时，用户计划不会更改？我也在使用资产管道来调用 JS、Css 和图像。

【问题讨论】：

有什么错误吗？例如在浏览器控制台中？
没有错误..它就像没有得到 findUserPlanByCurrency 的控制器..因为 println "================ "+params 没有出现在我的控制台中
你的params.id 填满了吗？你能在控制器中看到它吗？
@injecteer 当我更改货币时它看起来像......它不会影响控制器......因为......当我改变它时......这第一行没有打印.. --->> println“= =============== "+参数
查看生成的html代码。通常 url 看起来像 /singUp/findUserPlanByCurrency/yourId 并且是“静态的”，所以它不会受到 this.value 的影响。您当然可以在请求中包含this.value，但您必须在 g.link/remoteLink 等标签之外执行它：<input onclick="document.location = '${g.createLink( controller:'singUp', action:'findUserPlanByCurrency' )}/' + this.value" value="click"/>

标签： javascript grails groovy asset-pipeline

【解决方案1】：

<g:select name="currency.id"  value="${cifInstance?.currency?.id}" from="${currency}" optionKey="id"  optionValue="${{it.sym }}" 
                                                     onchange="${remoteFunction(
                                                                  controller:'signUp',
                                                                  action:'findUserPlanByCurrency',
                                                                  params:'\'currency=\' + escape(this.value)', 
                                                                  onComplete:'updateClasses(arguments[0])')}" 
                                          />

首先：它将在控制器上处理 findUserplanByCurrency 然后呈现为 JSON

并添加一个像这样的代码 javascript

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;

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



        for (var i=0; i < json.length; i++) {
            var js = json[i];
            var opt = document.createElement('option');
            alert(json);
            opt.text = js.noOfUser;
            opt.value = js.id;
            try {
                rselect.add(opt, null); // standards compliant; doesn't work in IE
            }
            catch(ex) {
                rselect.add(opt); // IE only
            }
        }       
    }
}

【讨论】：