Tips for integrating Grails ${createLink} into your javascript code

Question

Tips for integrating Grails ${createLink} into your javascript code

Below is a JavaScript function that I have:

function GetSelectedItem()
{
    var e = document.getElementById("country");
    var strSel =  e.options[e.selectedIndex].value;
    alert(strSel);
    var url = "${createLink(controller:'country', action: 'wholeTestUnits', id: strSel)}"
    alert(url);
 }

When I click the submit button, I want to navigate to the URL action:

<button class="submit_small" onClick="GetSelectedItem();">
    <span><g:message code="default.button.submit.label" /></span>
</button>

Unfortunately, the ${createLink} function is not functioning as expected.

javascript grails

Answer 1

Answer №1

A more efficient method for accomplishing this task without the need for JavaScript code to be embedded in your GSP file is as follows:

<button class="submit_small" onClick="GetSelectedItem();" data-url="${createLink(controller:'country', action: 'wholeTestUnits')}">
    <span><g:message code="default.button.submit.label" /></span>
</button>

function GetSelectedItem() {
    var button = event.target;
    var e = document.getElementById("country");
    var strSel =  e.options[e.selectedIndex].value;
    var url = button.getAttribute("data-url") + "/" + strSel;
}

Answer 2

A more efficient method for accomplishing this task without the need for JavaScript code to be embedded in your GSP file is as follows:

<button class="submit_small" onClick="GetSelectedItem();" data-url="${createLink(controller:'country', action: 'wholeTestUnits')}">
    <span><g:message code="default.button.submit.label" /></span>
</button>

function GetSelectedItem() {
    var button = event.target;
    var e = document.getElementById("country");
    var strSel =  e.options[e.selectedIndex].value;
    var url = button.getAttribute("data-url") + "/" + strSel;
}

Answer 3

Answer №2

It seems like there might be an issue between the server side and client side operations. The createLink function is executed on the server, while the JavaScript code runs on the client...

You can attempt the following solution:

var url = '${createLink(controller:'country', action: 'wholeTestUnits')}' + strSel ;

Answer 4

It seems like there might be an issue between the server side and client side operations. The createLink function is executed on the server, while the JavaScript code runs on the client...

You can attempt the following solution:

var url = '${createLink(controller:'country', action: 'wholeTestUnits')}' + strSel ;

Answer 5

Answer №3

It appears that you may not be properly retrieving the value of strSel in your link. To address this issue, consider implementing the following code snippet:

function GetSelectedItem()
{
        var e = document.getElementById("country");
        var strSel =  e.options[e.selectedIndex].value;
        alert(strSel);
        var url = "${grailsApplication.config.grails.serverURL}/country/wholeTestUnits/" + strSel
        alert(url);
}

Answer 6

It appears that you may not be properly retrieving the value of strSel in your link. To address this issue, consider implementing the following code snippet:

function GetSelectedItem()
{
        var e = document.getElementById("country");
        var strSel =  e.options[e.selectedIndex].value;
        alert(strSel);
        var url = "${grailsApplication.config.grails.serverURL}/country/wholeTestUnits/" + strSel
        alert(url);
}

Answer 7

Answer №4

Instead of relying on the createLink function, consider constructing your own URL for greater control. Be mindful of capitalization in the controller name.

var url="${ createLink(controller:'testcontroller', action:'getData') }";

This can be simplified to:

var url = "/testcontroller/getData;

If you need to pass arguments from JavaScript to the controller, follow this approach.

var url = "/testcontroller/getData?arg0=" + arg0 + "&arg1=" + arg1;

In the controller, use the params keyword to access the arguments. To display these parameters, use the following code:

println params.arg0
println params.arg1

Answer 8

Instead of relying on the createLink function, consider constructing your own URL for greater control. Be mindful of capitalization in the controller name.

var url="${ createLink(controller:'testcontroller', action:'getData') }";

This can be simplified to:

var url = "/testcontroller/getData;

If you need to pass arguments from JavaScript to the controller, follow this approach.

var url = "/testcontroller/getData?arg0=" + arg0 + "&arg1=" + arg1;

In the controller, use the params keyword to access the arguments. To display these parameters, use the following code:

println params.arg0
println params.arg1

Answer 9

Answer №5

    --inside a gsp file--
   <a href="#" onclick="makeAjaxCall('${createLink(controller:'shift',action: 'addShift')}");">Add or Edit Shifts</a>


    --within a js file--
    function makeAjaxCall(endpoint){
    //endpoint->/shift/addShift
       var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        document.getElementById("updateContent").innerHTML = this.responseText;
                    }
                };
                xhr.open("GET", endpoint, true);
                xhr.send();
      }

Answer 10

    --inside a gsp file--
   <a href="#" onclick="makeAjaxCall('${createLink(controller:'shift',action: 'addShift')}");">Add or Edit Shifts</a>


    --within a js file--
    function makeAjaxCall(endpoint){
    //endpoint->/shift/addShift
       var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        document.getElementById("updateContent").innerHTML = this.responseText;
                    }
                };
                xhr.open("GET", endpoint, true);
                xhr.send();
      }

Answer 11

Answer №6

Give this a shot: let target_url = "${generateLink(controller:'nation', task: 'allTestCases', parameters:[identifier: selectedString], complete: true)}"

Answer 12

Give this a shot: let target_url = "${generateLink(controller:'nation', task: 'allTestCases', parameters:[identifier: selectedString], complete: true)}"

Tips for integrating Grails ${createLink} into your javascript code

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Retrieve identification details from a button within an ion-item located in an ion-list

The Highchart formatter function is being called twice on each occasion

Creating a chat interface with chat bubbles in React JS can be done by implementing components such as Message

Error: The term 'RequestCompleted' is not recognized by Microsoft JScript

Arranging Typescript strings in sequential date format

What is the best way to add borders to the cities on interactive SVG maps?

Can you explain the functionality of $scope.$apply()?

Troubleshooting Issue with Filtering Nested Object Array Based on Property

Executing MySQL queries through JavaScript functions

Executing numerous tests on a single response using Node.js along with Chai, Mocha, and Should

Verify if the term is present in an external JSON file

Utilizing JavaScript to enable HTML checkbox to be checked automatically

Attempting to Send an Ajax Request and Utilize the Result within a React Component

What is the best way to save a parsed JSON value to a variable in Express?

Why do we even need Angular controllers when directives can perform the same tasks as controllers?

Display a webpage once its design is completely loaded in Nuxt

Error: The constructor for JsSHA is not valid for the TOTP generator

Unable to insert a JSON object into an Array

Retrieving the updated list after a child has been deleted from the Firebase Database

Tips for allowing divs to be dragged and resized within table cells and rows