【发布时间】：2012-01-03 23:18:26
【问题描述】：
[请从评论开始，看看这个问题目前在哪里，谢谢。希望快速/易于阅读]
我遇到了一种情况，我正在渲染一个模板，并且该模板有一个 javascript 函数，该函数需要通过 remoteFunction 向控制器操作发送正确的值，例如下面：
<script type="text/javascript">
function updateOrderEntry() {
alert("updating OrderEntries");
var unused = ${remoteFunction(action:'userByName', id:userId, update:[success: 'userOrderList', failure: 'userOrderListError'])};
}
</script>
当此函数在页面上执行时，我收到警报并“调用”到控制器中，但它没有发送 id 值（params 不包含 id）。当我构建模板时，我提供了 userId 作为模型参数，并且我已经验证它可以很好地进入模板（例如在 div 中）。
我已经尝试了上面的一堆变体，但无法让它工作，例如使用 remoteFunction 作为标签：
var unused = <g:remoteFunction action="userByName" id="${userId}" update="[success: 'userOrderList', failure: 'userOrderListError']" />;
我还尝试了使用 params 属性的各种风格（这会更好），但在没有让它工作之后，我想我会尝试让 id 参数工作。
当我尝试可变地填充 remoteFunction 属性时，我做错了什么？
谢谢
[项目在 Grails 1.3.7 上]
-------------------------------- 根据第 1 条/第 2 条评论更新 --------- --------------------------
没有此控制器的 URL 映射，但删除了另一个控制器的 URL 映射。另外注释掉我在这个控制器中的 beforeInterceptor 调试，即：
// def beforeInterceptor = [action: this.&debug]
// def debug() {
// println "ACTION: ${actionUri}, PARAMS: ${params}"
// }
我在 userByName 操作的顶部添加了调试代码，即：
def userByName = {
println "action: ${actionUri}, params: ${params}"
我还做了 3 个版本的 remoteFunction，从模板中的控制器发回，所有 3 都相同，除了第二个使用的 userId 是硬编码，而不是从变量中产生，即：
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]
问题是，第一个和第三个 remoteFunction 中的 userId 或 id 没有正确设置（如在服务器上看到的那样），不清楚为什么会这样。有什么不同，就是不知道是什么。
附：使用 Chrome 和 Firefox 的结果相同。
------ 更新每 cmets 3 - 5 下面-------------------------
查看 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
两个不好的（注意第一行和最后一行，以及？）是：
Request URL:http://localhost:8080/nameIsInAppPropsFile/money/userByName
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:11
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:null
因此，这表明浏览器发送的内容有所不同。
当我硬编码我给模板的值时，即模型：[....，userId：'4']，我得到了同样的失败结果。在我使用之前：model: [...., userId: order.user.id]，但我更新了我的调试输出并确认即使在这里硬编码“4”也无济于事。
更新：添加与真实代码匹配的最小测试用例。注意：真实代码是一个页面，有3个部分，顶部是固定的，选择了一个客户；中间部分更新了该客户的订单；底部显示通过订单关联的信用卡交易，通常是多笔交易（例如授权、捕获、作废等）。当用户在最底层的交易部分做了一个动作（例如void）时，不仅需要更新这个部分，还需要更新中间订单部分。我试图让订单部分 - “second div” - 通过使用底部事务部分的链接/remoteFunction 以及在其 onComplete 处理程序中调用一个 Javascript 函数来更新执行第二个 remoteFunction，以更新中间顺序部分。
下面是一个最小的测试用例，我无法准确地重现问题，但有趣的是发现了一个不同但相关的问题。看起来 Grails（或不知何故 IntelliJ，我的 IDE）在远程函数中指定的 id 参数存在问题，当它位于 Javascript 内部时。当你运行它时，你会明白我的意思。希望快速复制代码并运行。谢谢。
----一些简单的控制器，不需要模型----
class UiTestController {
static allowedMethods = [save: "POST", update: "POST", delete: "POST"]
def index = {
println "rendering remoteTest"
render(view: 'remoteTest')
}
def section1 = {
println "action1 params: ${params}"
render(template: 'remoteSection1', model: [id: params.id])
}
def section2 = {
println "action2 params: ${params}"
render(template: 'remoteSection2', model: [id: params.id])
}
}
--- remoteTest.gsp --
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
<title>Remote</title>
<g:javascript library="jquery" plugin="jquery"/>
</head>
<body>
<div style="text-decoration:underline; color:purple; cursor:pointer; margin: 20px"
onclick="${remoteFunction(action: 'section1', id:'1', update: 'section1')}">click to update section 1</div>
<br />
<div id="section1">1st Section to Update</div>
<br />
<div id="section2">2nd Section to Update</div>
</body>
</html>
---- _remoteSection1.gsp -----
<g:javascript library="jquery" plugin="jquery"/>
<div>
<p>Section 1 updated, (id=${id}). Now, similar to real code, we
<span style="text-decoration:underline; color:purple; cursor:pointer;"
onclick="${remoteFunction(action: 'section2', id: '2', update: 'section2')}">update section 2</span>
</p>
</div>
---- _remoteSection2.gsp -----
<g:javascript library="jquery" plugin="jquery"/>
<script type="text/javascript">
function updateSection1() {
alert("doing remoteFunction with fixed value 55");
var unused = ${remoteFunction(action: 'section1', id='55', update: 'section1')};
alert("doing remoteFunction with fixed value 65, using params");
var unused = ${remoteFunction(action: 'section1', params:[id:'65'], update: 'section1')};
}
</script>
<div>
<p>Section 2 updated, (id=${id}). Now, similar to real code, we
<span style="text-decoration:underline; color:purple; cursor:pointer;"
onclick="${remoteFunction(action: 'section2', id: '2', update: 'section2', onComplete: 'updateSection1()')}">update section 2 again, and also section 1 with javascript updateSection1() function</span>
</p>
</div>
FINAL UPDATE
代码现在可以运行，更改原因未知。我不得不继续执行其他一些任务，并且我已经对控制器进行了更改，然后又回到了这个任务中，令人惊讶的是，事情正在发挥作用。与以前相同的 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'])};
}
---------------- Google 网络视图向我显示的内容 -- 完整响应 --------------
<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&order=asc">ID</a></th>
<th class="sortable" ><a href="/nameIsInAppPropsFile/money/voidTrans/12?sort=dateCreated&order=asc">Date</a></th>
<th class="sortable" ><a href="/nameIsInAppPropsFile/money/voidTrans/12?sort=type&order=asc">Transaction Type</a></th>
<th class="sortable" ><a href="/nameIsInAppPropsFile/money/voidTrans/12?sort=responseCode&order=asc">Result</a></th>
<th class="sortable" ><a href="/nameIsInAppPropsFile/money/voidTrans/12?sort=totalAmt&order=asc">Amount</a></th>
<th class="sortable" ><a href="/nameIsInAppPropsFile/money/voidTrans/12?sort=description&order=asc">Description</a></th>
<th class="sortable" ><a href="/nameIsInAppPropsFile/money/voidTrans/12?sort=txid&order=asc">Authorize.Net Transaction Id</a></th>
<th class="sortable" ><a href="/nameIsInAppPropsFile/money/voidTrans/12?sort=responseReasonText&order=asc">Authorize.Net Response Text</a></th>
<th class="sortable" ><a href="/nameIsInAppPropsFile/money/voidTrans/12?sort=ccNumber&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>
-------------- Debug 输出在控制器中显示的内容 -----
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]
所以，我不知道为什么它现在可以工作，而不是以前。但是 updateOrderEntry() 是一样的。也许你看到我以前做错了什么，在这种情况下请告诉我。再次感谢您的所有帮助 Tomasz，我学到了很多能够使用 Google Chrome 进行调试（感谢您的帮助）。
【问题讨论】：
-
您是否为此控制器和操作指定了任何 UrlMappings？我怀疑您尝试解析 userId 并且它失败了。还要将
println params作为此操作的第一行并向我们展示输出。 -
@Tomasz - 谢谢，我根据你的 cmets 更新了这个。它在问题陈述中，请参阅：----根据第 1 条/第 2 条评论更新 ------
-
也许您在第二个中使用了
userId: 4，而不是userId: '4'？我的另一个提示：使用 Chrome，右键单击并检查元素，切换到网络选项卡，您可以准确地看到发送和接收的 AJAX 请求和响应，如下所示：code.google.com/chrome/devtools/docs/network.html。检查您的参数是否已发送。 -
@Tomasz 感谢您的回复。在我提供给渲染的模型中，我将那里的 userId 值硬编码为 4，即：model: [ ..., userId: '4']。不幸的是，这产生了相同的结果。根据您的第二条评论/手册，我将尝试查看 Chrome 通过网络发送的内容。请注意，虽然我看到在 3 种情况下被发送到上述浏览器。
-
@Tomasz - 我查看了发送的内容，似乎确实存在缺陷，即对于中间的硬编码，......好吧，让我在上面发布。
标签： grails