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

What is the best way to insert a record into the rth column of the nth row in a table

Having trouble retrieving req.session variables in Express/NodeJS?

What are the benefits of keeping JavaScript and HTML separate in web development?

ESLint flags a misuse of promises in my code that I believe is acceptable

Experiencing Chrome freezing issues due to a setInterval function in combination with React

Error: Unable to modify a property that is marked as read-only on object '#<Object>' in Redux Toolkit slice for Firebase Storage in React Native

Inscribe latitude from marker onto input field

Connecting a string array to the navigation bar

React's conditional statement is malfunctioning

two occurrences of the identical controller in AngularJS

The issue arises when DataTable fails to retrieve the ID element following a page transition

What is the optimal method for generating numerous records across various tables using a single API request in a sequelize-node.js-postgres environment?

angularJS controller does not seem to be functioning properly due to a certain

Updating Angular 8 Component and invoking ngOninit

Tips for retrieving page source with selenium Remote Control

The scrolling on the image listing webpage is not as fluid as desired

Leveraging Window Object in Custom Hooks with NextJS

Show method created by function, substituting the former element on the display

Integrating JSON with the DOM

Leveraging TypeScript to sort and extract specific elements from two arrays