Grails的 - AJAX调用

Question

期间更新与数据表中已经存在我有一个小的困境，并认为这可能是一个设计问题。根据一些条件（复选框等），我有一个返回到我的视图（searchResults）的联系人列表。基本上是一种高级搜索。

每个触头具有在字段三通设置，要么允许编辑，示出的细节，或“hitThis”。 hitThis方法执行一系列任务，将为联系人生成三个新值 - 年龄，大小和速度。当我点击该链接，我想基本上更新该行只与新值（列已经存在，只是为空）。

我在我的gsp中有一个div，其中包含一个显示searchResults列表的表。在我的表单提交搜索结果期间，我返回更新我的模板div存在的联系人列表。这工作正常。

在该div，我有一个形式，例如：

<td> 
    <g:form> 
    <fieldset class="buttons"> 
     <g:hiddenField name="id" value="${contactInstance?.id}" /> 
     <g:set var="searchResults" value="${searchResults}" /><br/> 
     <g:set var="cID" value="${contactInstance?.id}" /><br/> 
     <g:actionSubmit class="edit" action="edit" value="${message(code: 'Edit')}"/> 
     <g:actionSubmit class="show" action="show" value="${message(code: 'Show')}"/> 
     <g:remoteLink action="hitThis" value="Click Me" update="searchResultsDiv" params="[searchResults:searchResults, cID:cID]"/> 
    </fieldset> 
    </g:form> 
</td> 

当我选择远程链接hitThis，我想执行，将更新都附加在contactInstance行三列的动作在SearchResult所模板：

点击之前：

 
myName age size speed 
Tom  empty empty empty 

后点击：

 
myName age size speed 
Tom 20 6 4.9 

我认为渲染会处理它，但是对hitThis的调用不会返回最初传递来更新该表的searchResults列表（可能相当大）。我宁愿不传递列表，因为我觉得这是过度的，性能会受到影响。

我可以将用户重定向到该联系人的信息页面（显示），但我宁愿更新表格。

我怎么能简单地更新一个div甚至表行，之后我hitThis呼叫，而无需通过一切回到控制器只需要再次通过呢？

---

编辑：

所以我的结果现在根据例子你给我的是类似这样（的名字是泰德，大小为5，速度为4：

name  size speed 
Ted54 Ted54 Ted54 

这里我的部分观点：

<td id="name-${contactInstance.id}"><g:render template="name" model="['contactInstance':contactInstance]"/></td> 
<td id="size-${contactInstance.id}"><g:render template="size" model="['contactInstance':contactInstance]"/></td> 
<td id="speed-${contactInstance.id}"><g:render template="speed" model="['contactInstance':contactInstance]"/></td> 

<fieldset class="buttons"> 

    <g:hiddenField name="id" value="${contactInstance?.id}" /> 
    <g:remoteLink action="moreInfo" params="['cid':contactInstance?.id]" onSuccess="updateData(data,'${contactInstance?.id}'), updateData2(data,'${contactInstance?.id}'), updateData3(data,'${contactInstance?.id}')" >TEST</g:remoteLink> 
</fieldset> 

这里是我的javascript：

<script> 
     function updateData(data, id) { 
      alert(data); 
      $('#name-'+id).html(data); 
     } 

     function updateData2(data, id) { 
      alert(data); 
      $('#size-'+id).html(data); 
     } 

     function updateData3(data, id) { 
      alert(data); 
      $('#speed-'+id).html(data); 
     } 
    </script> 

而且我控制器的方法：

def moreInfo() { 
    def contactInstance = Contact.get(params.cid) 

    contactInstance.name= "Ted" 
    contactInstance.size= "5" 
    contactInstance.speed= "4" 

    if (contactInstance.save(flush: true)) { 
     println(contactInstance) 
    } 

    render(template:'name', model:[contactInstance:contactInstance]) 
    render(template:'size', model:[contactInstance:contactInstance]) 
    render(template:'speed', model:[contactInstance:contactInstance]) 
} 

Answer 1

您可以使用远程调用返回之后，JavaScript操作DOM的。我不确定为什么你需要通过远程调用传递整个searchResults，它可能是一个相当大的结构，你可能会考虑将它存储在会话中，并在那里进行操作，当然，这个是您采取的设计决策。）

想想这个的另一种方法是为表单创建一个模板。然后使用远程调用渲染该模板（替换td中的现有模板）。

模板：_myform.gsp

<g:form> 
    <fieldset class="buttons"> 
     <g:hiddenField name="id" value="${contactInstance?.id}" /> 
     <g:set var="searchResults" value="${searchResults}" /><br/> 
     <g:set var="cID" value="${contactInstance?.id}" /><br/> 
     <g:actionSubmit class="edit" action="edit" value="${message(code: 'Edit')}"/> 
     <g:actionSubmit class="show" action="show" value="${message(code: 'Show')}"/> 
     <g:remoteLink action="hitThis" value="Click Me" update="searchResultsDiv" params="[searchResults:searchResults, cID:cID]"/> 
    </fieldset> 
    </g:form> 

那么你的正常页面GSP可以是：

... 
<tr> 
    <td> 
    <g:render template="myform" /> 
    </td> 

    <td> 
    <g:render template="myform" /> 
    </td> 
</tr> 
... 

，并在 'hitThis' 行动，

def hitThis() { 
    ... 
    render(view: "myform") 
} 

最后，使用JavaScript替换客户端'td'中的表格