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:
- RemoteFunction
- RemoteLink
- SubmitToRemote
- FormRemote
- 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].
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
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.