I want to make an Ajax call using remoteLink (with Prototype as the Javascript library) but I need one of the parameters being passed to be the value from a textfield. Here's what I have so far in my GSP:
<input id="email" name="email" type="text"/>
...
<g:remot开发者_运维知识库eLink action="addEmail" params="[email:???]">Add</g:remoteLink>
What do I put in place of ??? to get the remoteLink to send the value of the email textfield as a parameter? Essentially, how do I reference/access the DOM within a Grails tag?
I tried putting
\$('email').value
in place of ??? but I got a "Could not parse script" error in my GSP.
Thanks
I've need to do done something similar before and the following worked for me (yep, not especially elegant):
<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>
Extracted to a javascript function for clarity, and added some spaces inside the params to show the single quotes clearer.
<g:remoteLink action="addEmail" params="${[email: some.groovy.to.get.your.email()]}">Add</g:remoteLink>
There is a better solution for this.
Use before attribute in remoteLink tag to set a js variable containing your DOM things.
For example: in js:
var MyJSClass = {
setParams: function() {
MyJSClass.dynamicParams = {email: $("#email").val(), myOtherField: anyJSLogicHere()}
}
}
in gsp:
<g:remoteLink action="addEmail" params="MyJSClass.dynamicParams" before="MyJSClass.setParams()">Add</g:remoteLink>
See the before code that is the js function that is executed before the request and sets the dynamicParams property that will be then used in the AJAX request.
If you are okay with using a button instead of a link this becomes trivial using the g:submitToRemote. But, if it has to be a link, you can do something ugly like this:
The 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>
The email controller:
class EmailController {
def index = { }
def addEmail = {
if(params?.emailAddr) {
render "${params.emailAddr}"
}
else {
render "No Email Entered"
}
}
}
Couple things to note if you customize this: * the first 'resp' argument to Ajax.Updater is the id of the div that you want to update * in the Form.serialize(document.theForm) command, the 'theForm' needs to correspond with the name you assign the form.
Based on Eduard's answer I deducted that Javascript code within the params attribute will be executed. So I tried the following and it worked:
<g:remoteLink action="addEmail" params="{email:\$('#email').val()}">Add</g:remoteLink>
In case you want to use remoteLink with Jquery, here is what worked for me.
<g:remoteLink action="${myBean.action}" params="[myParam: myBean.param]" update="updateDiv">
My Awesome Link
</g:remoteLink>
simple and neat.
![Interactive visualization of a graph in python [closed]](https://www.devze.com/res/2023/04-10/09/92d32fe8c0d22fb96bd6f6e8b7d1f457.gif)
加载中,请稍侯......
精彩评论