AJAX in Grails

Posted By : Rozi Ali | 05-Jan-2021

Introduction

AJAX (Asynchronous JavaScript And XML) is a technique used by the client-side to send or retrieve data from or to the server asynchronously. It does not require to refresh the whole page instead, it only refreshes parts of the web page and not interfere with the other portion of a web page, which makes it very fast and dynamic.

Grails support ajax in many forms:

  1. RemoteFunction
  2. RemoteLink
  3. SubmitToRemote
  4. FormRemote
  5. RemoteField

 

Also Read: An Introduction To Deno.JS

 

Ajax in Grails:

Let's understand them one by one

1. RemoteFunction: The RemoteFunction tag is used to write a javascript function that executes on a certain event on DOM.

<r:script>
    $(document).ready(function() {
       ${remoteFunction(
            controller:'home',
            action:'render_table_data',
            update:'table_data',
            onLoading:'$(.data-loading-spinner).removeClass(hidden);',
            onComplete:'$(.data-loading-spinner).addClass(hidden);'
          )};
    });
</r:script>

 

Also Read: JavaScript Promises vs RxJS Observables

 

2. RemoteLink: The RemoteLink tag is used to create a link that calls a defined function.

<g:each in=${bookInstanceList} status=i var=bookInstance>
        <g:remotelink action=showDetails id=${bookInstance.id} oncomplete=showSpinner(false);          onloading=showSpinner(true);update=bookDetails>${fieldValue(bean:bookInstance,field: title)}</g:remotelink>
</g:each>

 

3. SubmitToRemote: It requires a form, on button click event, it calls the defined method and serializes form data to pass as a parameter.

<g:form action="dashboard">
    Login: <input name="login" type="text" />
    <g:submitToRemote url="[action: 'dashboard']" update="update" />
</g:form>
<div id="update">

Here, the dashboard is the method name which is to be called

 

Also Read: Asynchronous Javascript

 

4. FormRemote: It is useful to create a form tag that uses a remote URL to hit ajax.

<g:formRemote name="formExample" update="update"
              url="[controller: 'login', action:'dashboard']">
    User Id: <input name="id" type="text" />
</g:formRemote>

 

5. RemoteField: It creates a text field that when changes send its data to a remote link.

<g:remoteField action="username" update="titleDiv"
               name="name" value="${user?.name}" />

 

Why Choose Oodles For Software Development?

 

We are a 360-degree software development company that provides complete web and mobile app development solutions for varied project requirements. Our end-to-end SaaS app development services address your mission-critical project requirements through scalable, responsive, and feature-rich software applications that are easy to scale. We carefully analyze your project requirements and formulate effective strategies to build enterprise-grade web and mobile applications for multiple platforms. For more info, contact us at [email protected]

About Author

Author Image
Rozi Ali

Rozi Ali is an accomplished software developer with extensive experience in the field of JAVA. She possesses a solid grasp of programming languages such as Java/Spring-boot, Python, and Typescript/Nodejs/GraphQL. Rozi has a strong background in Object-oriented programming (OOP) and is skilled in working with both relational databases like MySql, PostgreSQL and non-relational databases like MongoDb. She is proficient in REST APIs, Microservices, and code deployment, along with the development tools such as Jira, Git, and Bash. Additionally, Rozi has experience working with Cloud providers such as AWS and Azure. She has contributed significantly to a number of projects, including Konfer, VNS, Influsoft, VN Platform, QuickDialog, and Oodles-Dashboard.

Request for Proposal

Name is required

Comment is required

Sending message..