implementation of loading gif with AJAX in JSP

During the implementation of my JSPX code with loading GIF

When a list drop down is selected, the code looks like this:

<ui:composition>

<style type="text/css">#mask {display: none;cursor: wait;z-index: 99999;position:absolute;top: 0;left: 0;height: 100%;width: 100%; background-color: white;filter: alpha(opacity = 50); }
</style>

<div id="mask"><div style="position: absolute; top : 300px; left :550px; text-align : center; vertical-align: middle;font-family:arial,helvetica,verdana,sans-serif; color : red;font-size : 16px;font-weight : bold; text-decoration: underline;"><img id="ajaxBusyImage" src="#{facesContext.externalContext.requestContextPath}/images/progress.gif" />
<br/>loading</div></div>onchange="resetAllCheckBoxes();refreshAllActionButtons(#{myBean.selectedRotate.rotateReadOnly});showCursor();

The showCursor() method is as follows:

function showCursor() {
document.getElementById('mask').style.display = 'block';
return false;
}

I need to replicate this in a JSP file

When I tried including it within <body>, I encountered an error stating that it's not the correct place to include it.

How can I fix this issue or is there another approach to implementing it in JSP?

I added within the <body> tag and called the onChange method showCursor()

<div id="mask"><div style="position: absolute; top : 300px; left : 550px; text-align : center; vertical-align: middle;font-family: arial,helvetica,verdana,sans-serif; color : red; font-size : 16px; font-weight : bold; text-decoration: underline;"><img src="../images/blank.gif" /><br/>loadinggg</div></div>

--- Update: I have removed the image ID and provided the source path instead. The error has been resolved, but the GIF only appears as an image icon upon initial page load.

I am still unable to get the GIF working as intended.

Answer №1

You should delete the id in the img tag and use src as

<img scr= "/images/blank.gif">
by moving the gif to the images directory.

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

Transmit a base64-encoded image in an HTTP request to the server

I am currently working on sending a base64 image using the request npm module from a nodejs/express application to another REST API endpoint. Below is the code I am using: First, I have middleware set up using multer and datauri to upload the image in mem ...

If I tap on a different div, the popup window should automatically close

Currently, I am utilizing this code snippet to open a popup window: Update: <ul class="grid cs-style-1"> <?php $explainname = new wp_query( array ( 'post_type' => 'explainname' ) ); if ( $explainname->hav ...

Unsuccessful execution of JavaScript in returned HTML after being appended with jQuery .load() or .ajax()

I have attempted to use .load() and $.ajax in order to retrieve some HTML that needs to be added to a specific container. However, the JavaScript enclosed within the fetched HTML is not executing when I add it to an element. When employing .load(): $(&ap ...

The output from a spawned process behaves oddly when it is being piped

I have a goal to convert the session of a process execution into JSON (similar to [{ type: 'stdout', data: 'What's your name?' }, { type: 'stdin', data: 'Alex.' }, { type: 'stdout', data: 'Hi, Ale ...

What could be causing the issue of opacity and list reordering not functioning properly in react-dnd and react-virtualization?

I'm currently setting up a react-dnd sortable list within a react-virtualized List. I've been referencing an example from react-dnd which can be found here. Most of it is working as expected, but I'm encountering an issue where the items I ...

Python AJAX request missing data

Exploring the world of web scraping, I am delving into historical weather data extraction from the following website: Through my research on AJAX calls, I have uncovered the correct method to request this data using the code snippet below: import request ...

Passing data to a different JS file

Is there a way to pass the values of two variables to another JS file? var publicPath = path.resolve(__dirname, '/src/login'); app.use(express.static(publicPath)); app.get('/auth', function (request, response) { response.sendFile(p ...

Utilizing class attributes within multiple classes

I have created a custom class called MutationValidator as follows: const ERR_MSG = 'Error1'; @Service() export class MutationValidator { .. } This class is used in another class like so: import { MutationValidator } from './mutation ...

What separates a typical update from using the $set operator for updating?

Standard procedure: module.exports = (_id, newInfo) => { return User.update( {_id} , newInfo); }; Alternative approach with $set operator: module.exports = (_id, newInfo) => { return User.update( {_id} , {$set: newInfo} ); }; ...

What is causing the need for two offers to be sent in order to establish a WebRTC connection in Chrome

While attempting to develop a video and audio calling application with webrtc, I encountered an unusual issue where the connection fails to establish on the first try but succeeds upon resending the offer. Upon inspecting the peer's `connectionState`, ...

Double dragenter events triggered before dragleave in HTML5 drag and drop functionality

Currently, I'm researching HTML5 Drag and Drop functionality by using this resource. However, I've encountered an issue with the dragenter event that seems to fire twice for child elements before the dragleave event. Because of this, the dashed b ...

Assistance with Destiny 2 API {Javascript}

Need some assistance with the Destiny 2 / Bungie.net API. I'm struggling to retrieve the stats of a Destiny 2 player. Currently, I am utilizing the npm package: Click Here. Below is the code I'm using: destiny2.getProfile('Zyenax#1565&apos ...

Ways to extract information from an HTML response following a GET request

Attempting to retrieve data from a request on a NASA webpage has proven challenging as the information is not coming through easily for me. Initially, I inputted the longitude and latitude on this page, , only to receive an HTML response containing all the ...

Is there an issue with Vue 3's v-model not updating correctly in Chrome on Android devices?

In my project, I have developed a unique component that functions as a combination of an input and select field. This allows users to input text into the field and select items from a dropdown menu based on their query. The component works flawlessly on m ...

Using Javascript to dynamically retrieve accordion content from a dynamically generated ID

I am currently working on developing a more intricate accordion feature. The accordion will consist of 4 buttons (section 0-3) with unique content (lorem ipsum 0-3). Clicking on "section 0" should reveal "lorem ipsum 0", while clicking on "section 1" shoul ...

Tips for returning an element to its starting position following animation

Hey there, I’m fairly new to the world of HTML and CSS. Recently, I was working on creating a YouTube clone website and I’ve run into an issue with the navigation. On the official YouTube website, when you click on the hamburger menu icon, the naviga ...

Converting HTML content into a single string simplifies data manipulation and extraction

exampleHTML=" This is sample HTML code that needs to be converted into a string using JavaScript </p>" I am looking to transform it into a single string format like str="This is sample HTML code, that needs to be converted into a string ...

Change the ng-model of the initial controller when a button is clicked in a separate controller

I am working on an AngularJS application that has two controllers. I am facing an issue where I need to update the ng-model of an input field in the first controller by clicking a button in the second controller. Accessing the $scope of the first controlle ...

Having trouble confirming information within a modal with nightwatch js

There is an application with a pincode link that when clicked, opens a modal to input the pincode. However, I am experiencing difficulty entering the pincode inside the modal using nightwatch js. The application link is hometown.in I have attempted .wai ...

Next.js Content Switching: A Step-by-Step Guide

On my app, I have a main dashboard featuring a sidebar navigation and content container. However, being new to next.js and its routing system, I'm unsure how to update the content when a user navigates using the sidebar. Do I need to create separate p ...