Question

我想使用remoteLink（使用Prototype作为Javascript库）进行Ajax调用，但我需要将其中一个参数传递给textfield中的值。以下是我目前在GSP中所拥有的内容：

<input id="email" name="email" type="text"/>
...
<g:remoteLink action="addEmail" params="[email:???]">Add</g:remoteLink>

我应该代替什么？让remoteLink将电子邮件文本字段的值作为参数发送？基本上，我如何在Grails标签中引用/访问DOM？

我尝试了

\$('email').value

取代???但是我的GSP中出现了“无法解析脚本”的错误。

由于

Answer 1

我之前需要做类似的事情，以下事情对我有用（是的，不是特别优雅）：

<input id="email" name="email" type="text"/>
...
<g:javascript>
    var addEmail = function()
    {
        ${ remoteFunction (action:"addEmail", update:"update-element-id", params:"  'email=' +$('email').value  ") }
    };
</g:javascript>
<a href="javascript:void(0)" onclick="addEmail();return false;">add email</a>

为了清晰起见，提取到javascript函数，并在params中添加了一些空格，以显示单引号更清晰。

Answer 2

<g:remoteLink action="addEmail" params="${[email: some.groovy.to.get.your.email()]}">Add</g:remoteLink>

Answer 3

有一个更好的解决方案。

在remoteLink标签中使用before属性来设置包含DOM事物的js变量。

例如：在js：

var MyJSClass = {
  setParams: function() {
    MyJSClass.dynamicParams = {email: $("#email").val(), myOtherField: anyJSLogicHere()}  
  }
}

在gsp中：

<g:remoteLink action="addEmail" params="MyJSClass.dynamicParams" before="MyJSClass.setParams()">Add</g:remoteLink>

请参阅before代码，它是在请求之前执行的js函数，并设置将在AJAX请求中使用的dynamicParams属性。

Answer 4

如果您可以使用按钮而不是链接，那么使用g：submitToRemote会变得微不足道。但是，如果它必须是一个链接，你可以做一些丑陋的事情：

views / email / index.gsp：

<%@ page contentType="text/html;charset=UTF-8" %>

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Sample title</title>
    <g:javascript library="prototype" />
  </head>
  <body>
  <g:form name="theForm">
    Email: <g:textField name="emailAddr" />
    <!-- Here comes the ugly -->
    <a href="#" name="submit" 
       onclick="new Ajax.Updater('resp','${createLink(action:'addEmail')}',{asynchronous:true,evalScripts:true,parameters:Form.serialize(document.theForm)});return false">
    Submit Form
    </a>
  </g:form>
  <div id="resp">
  </div>
  </body>
</html>

电子邮件控制器：

class EmailController {

    def index = { }

    def addEmail = {

        if(params?.emailAddr) {
            render "${params.emailAddr}"
        }
        else {
            render "No Email Entered"
        }
    }
}

如果您自定义，请注意以下事项： * Ajax.Updater的第一个'resp'参数是您要更新的div的id *在Form.serialize（document.theForm）命令中，'theForm'需要与您指定表单的名称相对应。

Answer 5

根据Eduard的回答，我推断出params属性中的Javascript代码将被执行。所以我尝试了以下内容并且有效：

<g:remoteLink action="addEmail" params="{email:\$('#email').val()}">Add</g:remoteLink>

Answer 6

如果您想将remoteLink与Jquery一起使用，这对我有用。

<g:remoteLink action="${myBean.action}" params="[myParam: myBean.param]" update="updateDiv">
        My Awesome Link
</g:remoteLink>

简单而整洁。

在Grails中使用remoteLink的动态参数

6 个答案: