Updating template views in Grails without the use of ajax enables seamless and dynamic

In my GSP template, I am looking to provide the user with updates on the progress of a task within an overlay.

Once the user submits their data, the controller triggers a service to carry out the task. Simultaneously, another service calculates the percentage completed and sends this value to a function (shown below). Depending on the complexity of the task, the calculation service may be invoked multiple times by the main service.

    def progress(progressData) {

    def statusToView = progressData

    [statusToView:statusToView]
    }

The use of an Ajax remoteFunction call seems unfeasible as I cannot pass the 'progressData' property from the GSP template to the controller, resulting in a missing property error.

All I aim to achieve is to show the user the updated percentage value (statusToView) as it changes, and once the task is completed, the initiating function will redirect to a page notifying the user of job completion.

The template code simply displays the variable value:

     ${statusToView}

Answer №1

Here are two potential solutions:

  1. You could implement a timer that triggers an AJAX call to the server for real-time updates.
  2. Alternatively, you can utilize a WebSocket, which provides a bi-directional API allowing constant communication between browser and server. Callbacks on both sides will be triggered upon message reception.

Integrating the WebSocket API would enable your service to send updates to the browser instantaneously.

The challenge with templates arises next. A standard template won't suffice in this scenario. My recommendation is to develop a custom template containing a

<div id="updates">Starting...</div>
. Subsequently, within your JavaScript callback function, you can target this element by its ID and dynamically update its content with the most recent message from the server.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issues with jQuery ajax when trying to access remote JSON data

Even though I receive a json response when entering the URL in my browser, I am unable to access it using my code. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $.ajax({ url:"http ...

Use either Jquery or CSS3 to hide a div if one of its inner divs is empty

I have multiple data sets to display in divs with the same class name. Each div contains two inner divs. <div class="div1"> <div class="div2">Abc</div> <div class="div3"><?php echo $row['SOME VALUE']; ?>< ...

Is it possible to use jQuery to create a slide-up effect from the

Could I reverse the animation direction of my dropdown menu? Currently, it expands from the top to bottom. Is there a way to make it expand from the bottom to the top? Code snippet: animate({height:'show',opacity:'show'}, ddsmoothmenu ...

Click the button to reset all selected options

<form method="post" action="asdasd" class="custom" id="search"> <select name="sel1" id="sel1"> <option value="all">all</option> <option value="val1">val1</option> <option value="val2" selected="selected"> ...

Flip the Script: JQuery slideshow in reverse

Hey there, I've been tinkering with a JQuery slideshow and encountering an issue. All my images in the HTML are stacked on top of each other, and I attempted to modify the code so it starts with the last image. However, my attempts have not been succe ...

A guide on incorporating the close button into the title bar of a jQuery pop-up window

Check out this fiddle: https://jsfiddle.net/evbvrkan/ This project is quite comprehensive, so making major changes isn't possible. However, the requirement now is to find a way to place the close button for the second pop-up (which appears when you c ...

What could be causing the dropdown options to update in the source code upon the Ajax call, but not reflect in the user interface?

My Django dropdown buttons are supposed to be initially empty, but upon calling a script to fetch the drop-down options, I encounter a problem. Although I can see the options populating in the source code, they do not show up in the UI when I click on the ...

Frostyfire Ajax - Form Sending

I am seeking assistance with ColdFusion. I am interested in utilizing the CF9 ajax library. Currently, I have included <cfajaximport tags="cfform"> in my header and added a form using <cfdiv bind="url:domainchecker.cfm">. However, the entire fo ...

What is the best way to incorporate JavaScript multiple times on a single webpage?

<script type="text/javascript"> $(function() { var newYear = document.getElementById('HF'); alert('hehe' + newYear); $('#countdown1').countdown({ until: newYear, format: ' ...

Choose the heading element based on its class

I am trying to target a specific element by its class and store it in a variable, but I specifically need this element to be a heading element. To clarify: at any given time, there are always exactly 3 elements with this particular class on my page: an < ...

The script is unable to locate the property 'indexOf' because it is undefined

Searching for a specific value in an array using ui-select to capture values. A function is created to verify the existence of the value, which works perfectly fine. However, the console displays multiple instances of the error 'Cannot read property & ...

Utilizing Javascript to Extract Data from Twitter Json Files

Can someone provide assistance with parsing JSON feed text retrieved from Twitter? I am looking to access and apply style tags to elements like the link, created date, and other information. Any tips on how I can achieve this task successfully would be g ...

Skipping validation while navigating back on SmartWizardIf you need to bypass validation during backward

Looking for assistance with Jquery smartwizard? Check out the link. I want to disable validation when a user clicks on the "Previous" button in any step, except for the first step where the Previous button is disabled by default. Below is my JavaScript co ...

Instructions on incorporating a new variable into the ajax script using the post method

I am facing an issue with sending a value from my PHP script using a variable named $topid. The goal is to pass this id to the getData.php script, so I attempted the following approach: $(document).ready(function(){ // Load more data $('.loa ...

What is the correct way to utilize CSS for setting a responsive background image for an element?

When I set the background-image for an <a>, it always requires specifying the width and height in the stylesheet file. This causes the URL image to not be responsive. I've tried solutions such as using background-size: cover; and background-colo ...

Parent window login portal

I have just started learning how to program web applications, so I am not familiar with all the technical terms yet. I want to create a login window that behaves like this: When a user clicks on the Login button, a window should pop up on the same page t ...

Creating an HTML table from an array in an email using PHP

How can I use data collected by Javascript to generate an email in PHP? The array structure in JavaScript is like this: Menu[ item(name,price,multiplier[],ingred), item(name,price,multiplier[],ingred) ] The array Menu[] is dynamically cr ...

Can Jquery be utilized to signal a language change?

I'm working on my portfolio website that will be available in two languages, Thai and English. I have successfully implemented language buttons for changing between the two languages. However, I am facing an issue with the language selection when nav ...

Adding multiple lines of text using jQuery

I am facing an issue while trying to append a string to an HTML element. It works perfectly fine with a single line string, but breaks when I try to split it into multiple lines. <div><h4 >List to do:</h4><span id="added"></span ...

elements on the page that automatically update using AJAX

On my webpage, there is a news slider that displays items one by one. The page automatically refreshes to show new items. I am working on using ajax and a jquery timer to update the page whenever a new item is added. I'm trying to use AJAX to retriev ...