grails-在remoteFunction属性中使用变量值

[请从评论开始查看此问题的当前位置，谢谢。希望快速/易于阅读]

我遇到了这样一种情况：我正在呈现一个模板，该模板有一个javascript函数，需要通过remoteFunction将正确的值发送到控制器操作，例如：

<script type="text/javascript">
  function updateOrderEntry() {
    alert("updating OrderEntries");
    var unused = ${remoteFunction(action:'userByName', id:userId, update:[success: 'userOrderList', failure: 'userOrderListError'])};
  }
</script>

我在userByName操作的顶部添加了调试代码，即：

 def userByName = {
    println "action: ${actionUri}, params: ${params}"

我还制作了3个版本的remoteFunction，这些remoteFunction是从模板中的控制器返回的，所有3个版本都相同，除了第二个版本使用硬编码的用户ID，而不是从变量生成的，即：

 function updateOrderEntry() {
    alert("updating OrderEntries, 1st time");

    var unused = ${remoteFunction(action:'userByName', id:userId, params:[userId:userId], update:[success: 'userOrderList', failure: 'userOrderListError'])};

    alert("updating OrderEntries, 2nd time, THIS TIME WITH hardcoded id and param values");
    var unused = ${remoteFunction(action:'userByName', id:'4', params:[userId:'4'], update:[success: 'userOrderList', failure: 'userOrderListError'])};

    alert("updating OrderEntries, 3rd time, back to non-hard-coded values");
    var unused = ${remoteFunction(action:'userByName', id:userId, params:[userId:userId], update:[success: 'userOrderList', failure: 'userOrderListError'])};
}

将此函数发送回浏览器（从渲染模板）时，浏览器（Chrome，使用其网络调试）显示其接收：

   function updateOrderEntry() {
    alert("updating OrderEntries, 1st time");

    var unused = jQuery.ajax({type:'POST',data:{'userId': '4'}, url:'/nameIsInAppPropsFile/money/userByName/4',success:function(data,textStatus){jQuery('#userOrderList').html(data);},error:function(XMLHttpRequest,textStatus,errorThrown){jQuery('#userOrderListError').html(XMLHttpRequest.responseText);}});;

    alert("updating OrderEntries, 2nd time, THIS TIME WITH hardcoded id and param values");
    var unused = jQuery.ajax({type:'POST',data:{'userId': '4'}, url:'/nameIsInAppPropsFile/money/userByName/4',success:function(data,textStatus){jQuery('#userOrderList').html(data);},error:function(XMLHttpRequest,textStatus,errorThrown){jQuery('#userOrderListError').html(XMLHttpRequest.responseText);}});;

    alert("updating OrderEntries, 3rd time, back to non-hard-coded values");
    var unused = jQuery.ajax({type:'POST',data:{'userId': '4'}, url:'/nameIsInAppPropsFile/money/userByName/4',success:function(data,textStatus){jQuery('#userOrderList').html(data);},error:function(XMLHttpRequest,textStatus,errorThrown){jQuery('#userOrderListError').html(XMLHttpRequest.responseText);}});;
}

所有这些看起来和我一模一样。updateOrderEntry（）会被自动调用，我看到上面显示的所有3个警报。相应地，在服务器上，我看到以下调试输出：

action: /money/userByName, params: [userId:null, action:userByName, controller:money]
action: /money/userByName, params: [userId:4, id:4, action:userByName, controller:money]
action: /money/userByName, params: [userId:null, action:userByName, controller:money]

问题是，在第一个和第三个remoteFunctions中，用户id或id设置不正确（如服务器上所示），不清楚原因。有些事情是不同的，只是不知道是什么

另外，使用Chrome和Firefox的结果是相同的

---

------根据以下评论3-5进行更新--------------------------

  function updateOrderEntry() {
    alert("Updating OrderEntries --  1st time");
    ${remoteFunction(action:'userByName', id:userId, update:[success: 'userOrderList', failure: 'userOrderListError'])};

    alert("Updating OrderEntries -- 2nd time, THIS TIME WITH hardcoded id and param values");
    ${remoteFunction(action:'userByName', params:[id: '4'], update:[success: 'userOrderList', failure: 'userOrderListError'])};

    alert("Updating OrderEntries -- 3rd time, back to non-hard-coded values");
    ${remoteFunction(action:'userByName', params:[id: userId], update:[success: 'userOrderList', failure: 'userOrderListError'])};

 }

从Chrome发送的内容来看，中间的良好请求如下所示：

 Request URL:http://localhost:8080/nameIsInAppPropsFile/money/userByName/4
 Request Method:POST
 Status Code:200 OK
 Request Headersview source
 Accept:*/*
 Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
 Accept-Encoding:gzip,deflate,sdch
 Accept-Language:en-US,en;q=0.8
 Connection:keep-alive
 Content-Length:8
 Content-Type:application/x-www-form-urlencoded
 Cookie:JSESSIONID=F0FDCEE323A1834350E209A7C211E64D
 Host:localhost:8080
 Origin:http://localhost:8080
 Referer:http://localhost:8080/nameIsInAppPropsFile/money/transaction
 User-Agent:Mozilla/5.0 (Windows NT 6.0) AppleWebKit/535.7 (KHTML, like Gecko) Chrome/16.0.912.63 Safari/535.7
 X-Requested-With:XMLHttpRequest
 Form Dataview URL encoded
   userId:4

两个错误（注意第一行和最后一行，以及？）是：

因此，这表明浏览器发送的内容不同

当我硬编码给模板的值时，即model:[..，userId:'4']，我得到了相同的失败结果。在使用：model:[…，userId:order.user.id]之前，我更新了调试输出，并确认即使硬编码这里的“4”也没有帮助

---

更新：添加与实际代码匹配的最小测试用例。注：真正的代码是一个有3个部分的页面，顶部是固定的，其中选择了一个客户；中间部分更新为该客户的订单；底部显示通过订单关联的信用卡交易，通常是多个交易（例如授权、捕获、作废等）。当用户在底部事务部分执行操作（例如void）时，不仅需要更新此部分，还需要更新中间顺序部分。我试图通过在底部事务部分使用link/remoteFunction来更新order部分--“seconddiv”，并在其onComplete处理程序中调用一个Javascript函数来执行第二个remoteFunction，从而更新中间顺序部分

下面是一个最小的测试用例，我无法准确地再现问题，但有趣的是，我发现了一个不同但相关的问题。Grails（或者IntelliJ，我的IDE）似乎与remoteFunction中指定的id参数存在问题，而该参数位于Javascript内部。当你运行它时，你会明白我的意思。希望能快速复制代码并运行。谢谢

----一些简单的控制器，不需要模型----

---remoteTest.gsp--

---

---

代码正在运行，更改原因未知。我不得不继续做一些其他的任务，我又回到了这个任务中，对我的控制器进行了更改，令人惊讶的是，事情正在进行。与之前相同的Javascript调用。但我会很快把它贴出来，以防你看到以前有什么乱七八糟的事情：

--------------------------_moneyEntries.gsp中的相关Javascript代码--------------------------

  function updateOrderEntry() {
    alert("Updating OrderEntries --  1st time");
    ${remoteFunction(action:'userByName', id:userId, update:[success: 'userOrderList', failure: 'userOrderListError'])};

    alert("Updating OrderEntries -- 2nd time, THIS TIME WITH hardcoded id and param values");
    ${remoteFunction(action:'userByName', params:[id: '4'], update:[success: 'userOrderList', failure: 'userOrderListError'])};

    alert("Updating OrderEntries -- 3rd time, back to non-hard-coded values");
    ${remoteFunction(action:'userByName', params:[id: userId], update:[success: 'userOrderList', failure: 'userOrderListError'])};

 }

----------------谷歌网络视图向我展示的是——整个响应--------------

  function updateOrderEntry() {
    alert("Updating OrderEntries --  1st time");
    ${remoteFunction(action:'userByName', id:userId, update:[success: 'userOrderList', failure: 'userOrderListError'])};

    alert("Updating OrderEntries -- 2nd time, THIS TIME WITH hardcoded id and param values");
    ${remoteFunction(action:'userByName', params:[id: '4'], update:[success: 'userOrderList', failure: 'userOrderListError'])};

    alert("Updating OrderEntries -- 3rd time, back to non-hard-coded values");
    ${remoteFunction(action:'userByName', params:[id: userId], update:[success: 'userOrderList', failure: 'userOrderListError'])};

 }

---

所以，我不知道为什么它现在起作用了，而不是以前。但是updateOrderEntry（）是相同的。也许你看到我以前做错了什么，在这种情况下请告诉我。再次感谢您对Tomasz的帮助，我在使用Google Chrome进行调试时学到了很多东西（感谢您的帮助）。

Grails 2.0对我来说很好，我已经设置了

def userId=7

，正如您在URL中看到的：

            function updateOrderEntry() {
                alert("updating OrderEntries");
                var unused = jQuery.ajax({type:'POST', 
                    url:'/controller/userByName/7',
                    success:function(data,textStatus)
                        {jQuery('#userOrderList').html(data);},
                    error:function(XMLHttpRequest,textStatus,errorThrown)
                        {jQuery('#userOrderListError').html(XMLHttpRequest.responseText);}
            });;}        

---

Grails 2.0对我来说效果很好，我设置了

def userId=7

，正如您在URL中看到的：

            function updateOrderEntry() {
                alert("updating OrderEntries");
                var unused = jQuery.ajax({type:'POST', 
                    url:'/controller/userByName/7',
                    success:function(data,textStatus)
                        {jQuery('#userOrderList').html(data);},
                    error:function(XMLHttpRequest,textStatus,errorThrown)
                        {jQuery('#userOrderListError').html(XMLHttpRequest.responseText);}
            });;}        

---

以下是参数在remoteFunction中的工作方式：

....
params:'\'id=\'+document.getElementById(\'idField\').value',
.....

---

以下是参数在remoteFunction中的工作方式：

....
params:'\'id=\'+document.getElementById(\'idField\').value',
.....

---

谢谢你的回复。对于这个项目，我仍然使用Grails1.3.7。你能告诉我你能看到这个输出的工具/方式吗？也就是说，从一个模板的呈现中得到的放入浏览器页面的javascript？当我在Firefox中使用“查看页面源代码”或在Chrome中使用“查看源代码”时，我看不到通过模板呈现保存到浏览器中的结果，也看不到保存的Javascript或html标记。@Ray对于Firefox，您可以安装Firebug，对于Chrome，默认情况下安装Firebug。右键单击要检查的图元，然后选择“检查图元”。您将看到整个页面的DOM和更多有用的信息。谢谢Tomasz。我现在看到了。令人惊讶的是，发送回浏览器的url如下所示：url:“/nameisnappropsfile/money/userByName/4”。但是，当调用该链接时，我的Grails调试显示：ACTION:/money/userByName，PARAMS:[ACTION:userByName，controller:money]--没有ID参数。所以，我不确定到底发生了什么。多亏了Tomasz，我更新了问题描述以更清楚地显示一切，现在还使用了remoteFunction的params属性。有没有想过问题是什么，为什么参数或id没有通过服务器（如grails所示）。请注意，我根据您对问题的评论更新了问题描述。谢谢您的回复。对于这个项目，我仍然使用Grails1.3.7。你能告诉我你能看到这个输出的工具/方式吗？也就是说，从一个模板的呈现中得到的放入浏览器页面的javascript？当我在Firefox中使用“查看页面源代码”或在Chrome中使用“查看源代码”时，我会这样做

FINAL UPDATE

  function updateOrderEntry() {
    alert("Updating OrderEntries --  1st time");
    ${remoteFunction(action:'userByName', id:userId, update:[success: 'userOrderList', failure: 'userOrderListError'])};

    alert("Updating OrderEntries -- 2nd time, THIS TIME WITH hardcoded id and param values");
    ${remoteFunction(action:'userByName', params:[id: '4'], update:[success: 'userOrderList', failure: 'userOrderListError'])};

    alert("Updating OrderEntries -- 3rd time, back to non-hard-coded values");
    ${remoteFunction(action:'userByName', params:[id: userId], update:[success: 'userOrderList', failure: 'userOrderListError'])};

 }

<script type="text/javascript" src="/nameIsInAppPropsFile/plugins/jquery-       1.6.1.1/js/jquery/jquery-1.6.1.js"></script>

<script type="text/javascript">

    function confirmVoid(moneyTransId) {
       return confirm("Void transaction ID " +moneyTransId + ":");
    }

   function confirmCredit(moneyTransId, amountIn) {
     var valid = false;
     var amount = amountIn;
    while (!valid) {
        var r = prompt("For ID " +moneyTransId+ ", please specify the amount:", amount);
        if (r == null || r == "") {
            valid = true;
            amount = -1;
        } else {
            //alert("result is:" +r);
            if (r > amount) {
                alert("You cannot credit an amount greater than " + amount);
                amount = amountIn;
            }
            else {
                amount = r;
                // invoke remote function, update result
                valid = true;
            }
        }
    }
    return amount;
}

function confirmCapture(moneyTransId) {
    return confirm("Capture funds for ID " +moneyTransId + ":");
}

function confirmSend(moneyTransId) {
    return confirm("Are you sure you want to send an email receipt for ID " +moneyTransId + ":");
}
    //var unused = jQuery.ajax({type:'POST', url:'/nameIsInAppPropsFile/money/userByName/3',success:function(data,textStatus){jQuery('#userOrderList').html(data);},error:function(XMLHttpRequest,textStatus,errorThrown){jQuery('#userOrderListError').html(XMLHttpRequest.responseText);}});;

function updateOrderEntry() {
    alert("Updating OrderEntries --  1st time");
    jQuery.ajax({type:'POST', url:'/nameIsInAppPropsFile/money/userByName/8',success:function(data,textStatus){jQuery('#userOrderList').html(data);},error:function(XMLHttpRequest,textStatus,errorThrown){jQuery('#userOrderListError').html(XMLHttpRequest.responseText);}});;

    alert("Updating OrderEntries -- 2nd time, THIS TIME WITH hardcoded id and param values");
    jQuery.ajax({type:'POST',data:{'id': '4'}, url:'/nameIsInAppPropsFile/money/userByName',success:function(data,textStatus){jQuery('#userOrderList').html(data);},error:function(XMLHttpRequest,textStatus,errorThrown){jQuery('#userOrderListError').html(XMLHttpRequest.responseText);}});;

    alert("Updating OrderEntries -- 3rd time, back to non-hard-coded values");
    jQuery.ajax({type:'POST',data:{'id': '8'}, url:'/nameIsInAppPropsFile/money/userByName',success:function(data,textStatus){jQuery('#userOrderList').html(data);},error:function(XMLHttpRequest,textStatus,errorThrown){jQuery('#userOrderListError').html(XMLHttpRequest.responseText);}});;

}


 </script>

 <div>
    <div style="margin-bottom:9px;">Order # 1005 Merchant Transactions:
    <span class="jsAction" style="padding-left:30px"
          onclick="jQuery.ajax({type:'POST',data:{'userId': '8'}, url:'/nameIsInAppPropsFile/money/userByName',success:function(data,textStatus){jQuery('#userOrderList').html(data);},error:function(XMLHttpRequest,textStatus,errorThrown){jQuery('#userOrderListError').html(XMLHttpRequest.responseText);}});; return false;">(refresh order status)</span></div>
<div class="list">
    <table>
        <thead>
        <tr>
            <th>What Action?</th>
            <th class="sortable" ><a href="/nameIsInAppPropsFile/money/voidTrans/12?sort=id&amp;order=asc">ID</a></th>

            <th class="sortable" ><a href="/nameIsInAppPropsFile/money/voidTrans/12?sort=dateCreated&amp;order=asc">Date</a></th>

            <th class="sortable" ><a href="/nameIsInAppPropsFile/money/voidTrans/12?sort=type&amp;order=asc">Transaction Type</a></th>

            <th class="sortable" ><a href="/nameIsInAppPropsFile/money/voidTrans/12?sort=responseCode&amp;order=asc">Result</a></th>

            <th class="sortable" ><a href="/nameIsInAppPropsFile/money/voidTrans/12?sort=totalAmt&amp;order=asc">Amount</a></th>

            <th class="sortable" ><a href="/nameIsInAppPropsFile/money/voidTrans/12?sort=description&amp;order=asc">Description</a></th>

            <th class="sortable" ><a href="/nameIsInAppPropsFile/money/voidTrans/12?sort=txid&amp;order=asc">Authorize.Net Transaction Id</a></th>

            <th class="sortable" ><a href="/nameIsInAppPropsFile/money/voidTrans/12?sort=responseReasonText&amp;order=asc">Authorize.Net Response Text</a></th>

            <th class="sortable" ><a href="/nameIsInAppPropsFile/money/voidTrans/12?sort=ccNumber&amp;order=asc">Credit Card #</a></th>

        </tr>
        </thead>
        <tbody>

            <tr class="odd">

                <td>
                   <!-- First Check for transaction validity, for it to be 'actionable' -->

                      none

                   </td>


                <td>13</td>

                <td>01-13-12 03:41 MST</td>

                <td>VOID OF previous authorization, ID 12</td>

                <td><span class="">
                        Approved</span></td>

                <td>NA</td>

                <td>Void: sfk .</td>


                <td>2168161109</td>

                <td><span class="">
                    This transaction has been approved.</span></td>

                <td></td>

            </tr>

            <tr class="even">

                <td>
                   <!-- First Check for transaction validity, for it to be 'actionable' -->
                   none
                   </td>


                <td>12</td>

                <td>01-13-12 03:41 MST</td>

                <td>AUTHORIZATION ONLY - then Voided in ID 13</td>

                <td><span class="">
                        Approved</span></td>

                <td>$11</td>

                <td>sfk .</td>


                <td>2168161109</td>

                <td><span class="">
                    This transaction has been approved.</span></td>

                <td>x9113</td>

            </tr>

        </tbody>
    </table>
   </div>

   <!--div class="paginateButtons">

   </div-->
 </div>

 ACTION: /money/userByName, PARAMS: [id:8, action:userByName, controller:money]
 ACTION: /money/userByName, PARAMS: [id:4, action:userByName, controller:money]
 ACTION: /money/userByName, PARAMS: [id:8, action:userByName, controller:money]

            function updateOrderEntry() {
                alert("updating OrderEntries");
                var unused = jQuery.ajax({type:'POST', 
                    url:'/controller/userByName/7',
                    success:function(data,textStatus)
                        {jQuery('#userOrderList').html(data);},
                    error:function(XMLHttpRequest,textStatus,errorThrown)
                        {jQuery('#userOrderListError').html(XMLHttpRequest.responseText);}
            });;}        

....
params:'\'id=\'+document.getElementById(\'idField\').value',
.....