Executing a controller method in Grails using JavaScript

Question

Executing a controller method in Grails using JavaScript

When working in a Grails view, I find myself needing to execute a JavaScript method to retrieve certain information. To achieve this, I have set up a submit action as shown below:

<input type="submit" name="submit" class="submit action-button" value="Generate" onclick="generateReport()" style="float: right" />

After the generateReport() function is executed, I need to call or redirect to the show action of a Controller (since I am already at the create action).

I have attempted two approaches:

1) var jsonData = generateJSON();
    <g:remoteFunction controller="report" action="show" params="[data:jsonData]" />

2) var jsonData = generateJSON();
    <g:remoteFunction controller="report" action="show" params="[data:${jsonData}]" />

The issues encountered were:

1) The data passed was null.
2) A compilation error occurred:</p>
<code>org.codehaus.groovy.grails.web.taglib.exceptions.GrailsTagException
Message
Attribute value quote wasn't closed (controller="report" action="show" params="[data:${jsonData}]").

javascript grails

Answer 1

Answer №1

Here is a suggestion for you to try:

To start, declare a variable within your GSP file like so:

<script type="text/javascript>
    var yourVariable = "${createLink(url: [controller: 'yourController', action: 'yourAction'])}";
</script>

Next, in your JavaScript file, you can utilize AJAX.

For example:

function checkUsernameAvailable(user, example){
    $.ajax(
    {
        url: yourVariable,
        contentType:"text/json",
        type: "get",
        data: ({ id: usernamenya}),
        dataType: "json",
        cache: false,
        async: false,
        success: function(data) {
               //Perform actions based on response
        },
        error: function(xhr) {
            //Handle errors here
        }
    });                 
}

Answer 2

Here is a suggestion for you to try:

To start, declare a variable within your GSP file like so:

<script type="text/javascript>
    var yourVariable = "${createLink(url: [controller: 'yourController', action: 'yourAction'])}";
</script>

Next, in your JavaScript file, you can utilize AJAX.

For example:

function checkUsernameAvailable(user, example){
    $.ajax(
    {
        url: yourVariable,
        contentType:"text/json",
        type: "get",
        data: ({ id: usernamenya}),
        dataType: "json",
        cache: false,
        async: false,
        success: function(data) {
               //Perform actions based on response
        },
        error: function(xhr) {
            //Handle errors here
        }
    });                 
}

Answer 3

Answer №2

The variable json cannot be assigned to data as params in , since var jSon is a JavaScript variable. The data in the params attribute requires a model parameter coming from the controller.

In the 1st option, when it is assigned as params, it shows null because it is not a model parameter from the controller.

The 2nd option would result in a compile error as this is not the correct way to define a model parameter from the controller.

It is recommended to retrieve jSon as a model from the controller and then define it as params.

You can also refer to the following link for defining g:remoteFunction in onclick itself:

I hope this information is helpful! Thank you.

Answer 4

The variable json cannot be assigned to data as params in , since var jSon is a JavaScript variable. The data in the params attribute requires a model parameter coming from the controller.

In the 1st option, when it is assigned as params, it shows null because it is not a model parameter from the controller.

The 2nd option would result in a compile error as this is not the correct way to define a model parameter from the controller.

It is recommended to retrieve jSon as a model from the controller and then define it as params.

You can also refer to the following link for defining g:remoteFunction in onclick itself:

I hope this information is helpful! Thank you.

Answer 5

Answer №3

Unfortunately, the remoteFunction tag is not suitable in this scenario as it is processed into html and JavaScript on the server side prior to knowing the value of JSON on the client side.

To resolve this issue, you will need to make an ajax call manually (e.g. using jQuery).

Answer 6

Unfortunately, the remoteFunction tag is not suitable in this scenario as it is processed into html and JavaScript on the server side prior to knowing the value of JSON on the client side.

To resolve this issue, you will need to make an ajax call manually (e.g. using jQuery).

Executing a controller method in Grails using JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

Route functions cannot be hoisted in the Express framework

"Learn the art of refreshing data in AngularJS following the use of $emit event handling

Creating a Delicious Earth Progress Pie

Setting the attribute dynamically for a select box with multiple choices

"Utilizing Dynamic Dropdown Options Pulled from Database and Automatically Refreshing List upon

Passing an array of integer arrays to a controller method in ASP MVC using Ajax

Can we modify a currently active document within MongoDB?

Tips on validating ASP.NET gridview textbox with javascript during the update process:

Combining strings and variables in Vue.js with the use of bootstrap-vue syntax

I need to update my database by sending requests to my API, as the changes are not being reflected in the current database state. I am eager to see the

Content will be loaded only after the user clicks on the item

Hiding labels in an HTML document can be achieved by using CSS

Issue with pushing inner list<object> in Knockout version 3.2.0

When the page is loaded, populate FullCalendar with events from the model

Creating a React functional component that updates state when a specific window breakpoint is reached

Rearrange the order of items in the fancybox gallery

The Jasmine test in my Angular project is experiencing a timeout issue, displaying the error message "Async callback was not invoked within 5000ms", despite the fact that no async function is being used in the

Creating XML files using Node.js

Could you clarify that for me?

Determine the date and time based on the number of days passed