CODEWITHSUNDEEP
grails
Everett Toews
Everett Toews

Reputation: 10956

Dynamic params using remoteLink in Grails

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:remoteLink 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

Upvotes: 1

Views: 13091

Answers (6)

Abhay
Abhay

Reputation: 397

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.

Upvotes: -1

tantrum_junkie
tantrum_junkie

Reputation: 1

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>

Upvotes: 0

Eduard
Eduard

Reputation: 3671

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.

Upvotes: 3

Chris
Chris

Reputation: 1236

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.

Upvotes: 5

chrislatimer
chrislatimer

Reputation: 3560

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.

Upvotes: 0

John Stoneham
John Stoneham

Reputation: 2483

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

Upvotes: 2

Related Questions