pass javascript variables into grails params

Question

So I need to pass javascript variables into grails parameters to build and download a file. So initially did this with ajax just to learn that ajax doesn't do downloads. Initially this worked like so:

<script type="text/javascript" charset="utf-8">
    function myFunction() {

        jQuery.ajax({
            url: "Search/download",
            type: "POST",
            data: {facets: visualSearch.searchQuery.facets()}
        });
    }
</script>
<input type="button" onclick="myFunction()" value="download">

While this passed the mapping correctly, this didn't do downloads.

So now I am want to do something similar with a g:link

<g:link controller="Search" action="test" params="[facets: '\$(visualSearch.searchQuery.facets())']" >TEST GRAILS</g:link>

But all I get in the params in the controller are

facets=$(visualSearch.searchQuery.facets())
action=test
controller=search

How can I fix this to pass the facets (whether parsed or unparsed) into the controller. Thanks!

aldrin · Accepted Answer · 2013-08-20 06:05:27Z

3

Adding your javascript variable in params will not work. The g:link is executed on the server side and has no knowledge of your javascript values. You can remove this params and instead add code on the `onclick' event of your link to set your javascript values in the params.

Something like: In the gsp page,

<g:link name="searchLink" controller="Search" action="test">TEST GRAILS</g:link>

and then in javascript (in the same page),

$(function() {
  $('a[name="searchLink"]').bind('click', function() {
    $(this).attr('href', $(this).attr('href') + '?facets=' + visualSearch.searchQuery.facets());
  })
})

Basically you are using Grails to generate the hyperlink and then using JQuery to append a query string with the parameters to that href

Hope that helps.

edited Aug 20, 2013 at 6:05

answered Aug 19, 2013 at 17:27

aldrin

4,5821 gold badge36 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Badmiral Over a year ago

what would the code be? just <g:link controller="Search" action="test" onclick="return exportList()" >TEST GRAILS</g:link> ?

Badmiral Over a year ago

sorry, still doesn't work, all the params has in it is action=test controller=search

aldrin Over a year ago

there was a typo. should have been facet= See if that works for you. Also tested this snippet here - jsfiddle.net/hztYf

Badmiral Over a year ago

perfect! It worked, I had to use visualSearch.searchQuery.value instead of visualSearch.searchQuery.facets since otherwise I was getting back objects, but I should be able to parse it

Gregg Over a year ago

Forcing the javascript to be on GSP when it doesn't need to be has a bad smell to it. Yes, it works. But it's kind of an anti-pattern in most cases.

|

Gregg · Accepted Answer · 2013-08-19 18:37:34Z

1

What I tend to do in these cases is use the g:link to generate the URL, but then override the default behavior with jQuery to make the ajax call:

<g:link class="searchLink" controller="Search" action="test" params="[facets: '\$(visualSearch.searchQuery.facets())']" >TEST GRAILS</g:link>

$('.searchLink').on('click', function(e) {
  e.preventDefault(); // prevent default link behavior

  var $element = $(this);
  var url = $element.prop('href');

  $.post(url, function(data) { 
    // callback if you need it
  });
});

answered Aug 19, 2013 at 18:37

Gregg

36k22 gold badges115 silver badges221 bronze badges

2 Comments

Badmiral Over a year ago

sorry a little confused, is the javascript meant to do the controller call or is it meant to get the facets?

Gregg Over a year ago

the javascript makes the ajax call to the server using the href that is created via the g:link tag.

BMH · Accepted Answer · 2013-08-20 07:05:13Z

0

From what you have I think you should create a form and submit it in the click event:

<script type="text/javascript" charset="utf-8">
    function myFunction() {
        $('<form>', {
            "html": '<input type="text" name="facets" value="' + visualSearch.searchQuery.facets() + '" />',
            "action": '${createLink(controller: "Search", action: "test")}',
            "method": 'POST'
        }).appendTo(document.body).submit();
    }
</script>
<input type="button" onclick="myFunction()" value="download">

Or refactor your code to have a real html form and prepare the data for it before submit.

answered Aug 20, 2013 at 7:05

BMH

4,3401 gold badge20 silver badges19 bronze badges

Collectives™ on Stack Overflow

pass javascript variables into grails params

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related