When the button with an image is clicked, it will display a loading element

I have developed an application that heavily utilizes ajax, and I am looking to implement the following functionality: I would like to have a button with both text and an image. When this button is clicked, it should be disabled, and instead of the original image, an ajax loading element will display inside the button. Once the ajax loading is finished, the original image on the button should return.

Do you know of any reliable resources or tutorials that can help me achieve this? Suggestions from fellow developers are also welcome!

javascriptjqueryasp.net-mvccssajax

Answer №1

Changing the source of an image button is simple; just follow these steps:




function updateImageSource(element) {
  // Make AJAX call and perform actions
  element.setAttribute('src', 'loading.gif');
}




Remember to revert back to the original image once you receive a response from the server, in the same manner as changing it to the loading.gif.

    
         
       
     
   
 

  

    

      

        
      

      

        
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

      

    

  



  

    

      

        
        
Create a fresh trail underneath the overlay image

        
When utilizing fabric.js to draw a new path with isDrawingMode: true enabled (seen on the right side of the screenshot), I am encountering an issue where the path appears above my overlay image, which is a transparent png.

https://i.stack.imgur.com/R3fGn. ...

		
javascripthtml5-canvasfabricjs

      

    

  



  

    

      

        
        
Implementing mixin functions in vue.router routes with Vue.js

        
Is there a way to dynamically change the title of the window based on each route? I have included a meta: { title: ... } object in each child object within the routes: []. Here is an example:

routes: [
{
  path: 'profile/:id',
  name: 'Prof ...

		
javascriptvue.jsvue-routermixinsvue-mixin

      

    

  



  

    

      

        
        
The jQuery AJAX request is not properly nesting the HTML elements generated by PHP

        
I am currently utilizing jQuery to intercept a link that leads to a php file. This particular php file consists mostly of html, but also calls two php functions that utilize for loops to generate html content. The issue I am facing is that the ajax call is ...

		
phpjqueryhtmlajaxgenerated

      

    

  



  

    

      

        
        
Show a pop-up window utilizing a cookie

        
I am attempting to have a modal window appear only once per session using cookies.
The code below successfully displays an alert box once per session, but when I try to implement the modal code, it does not function properly.

if ($.cookie('modal&apos ...

		
jquerycookiesmodal-dialog

      

    

  



  

    

      

        
        
Creating a flexible route path with additional query parameters

        
I am facing a challenge in creating a unique URL, similar to this format:
http://localhost:3000/boarding-school/delhi-ncr

However, when using router.push(), the dynamic URL is being duplicated like so:
http://localhost:3000/boarding-school/boarding-school ...

		
javascriptreactjsnext.jsrouter

      

    

  



  

    

      

        
        
`Node.js troubleshooting: Dealing with file path problems`

        
I am currently in the process of deploying a node.js based application to IBM's Bluemix and have made some modifications to one of their provided samples. I have included an additional javascript file that initiates an ajax call to PHP, but unfortunat ...

		
javascriptajaxnode.jsibm-cloudcontinuous-delivery

      

    

  



  

    

      

        
        
Displaying the Yii form directly on the page upon loading, rather than enclosed within a jQuery dialog box

        
After studying this yii wiki page, I encountered an issue where the form is supposed to appear within a jQuery dialog box, but it opens immediately when the page loads instead.

Upon further investigation, I discovered that removing the success callback fr ...

		
javascriptphpjqueryajaxyii

      

    

  



  

    

      

        
        
Building a straightforward RESTful API for user authentication with Node.js, MongoDB, and Express.js

        
Can someone provide guidance on creating a RESTful API using Node.js, Express.js, and MongoDB? Specifically, I am looking for assistance with writing the schema for login and sign up pages, as well as comparing data in MongoDB using Node.js Express.js.

As ...

		
javascriptnode.jsmongodbrestexpress

      

    

  



  

    

      

        
        
Exploring the dynamic capabilities of JSON with ASP .Net

        
After successfully retrieving JSON data from a database using PHP through json_encode() and jQuery parsing, I'm curious if there is a similar method for accomplishing this dynamically in ASP.Net Web Forms. Specifically, without the need to pre-determi ...

		
jqueryasp.netajaxjson

      

    

  



  

    

      

        
        
Instructions on displaying the filename as the input for width and height dimensions

        
Running into an issue with Bootstrap 4 - whenever I try to upload a file with a long name, it ends up overflowing beyond the input field. ...

		
javascripthtmlcsstwitter-bootstrapbootstrap-4

      

    

  



  

    

      

        
        
What is a creative way to get rid of old content on a webpage using jQuery without relying on the

        
As I work on my crossword project, I have almost completed it, but encountering a problem.

Within my HTML code, I have a select list that loads a .JSON file using Javascript.

<form method="post" id="formulaire">
<div class="toto">
    <sel ...

		
javascriptjqueryhtml

      

    

  



  

    

      

        
        
What is the best way to sort inertia data on the client-side?

        
Looking for a solution with my component that receives data, I have the following setup in my controller:
route::get('/', function() { return inertia('foo', ['data' => Model::all()]) });

Within my Vue component:
<templa ...

		
javascriptvue.jsinertiajs

      

    

  



  

    

      

        
        
Unable to dynamically append items to Owl Carousel using JavaScript

        
I am currently working on adding items dynamically to an Owl carousel. This is how I am approaching it:

HTML

<div id="avatar-carousel" class="owl-carousel lesson-carousel">
                                            <div class="item item-logo"& ...

		
javascriptjqueryowl-carousel

      

    

  



  

    

      

        
        
Refreshing AJAX content with a dynamically adjusting time interval

        
I am facing a scenario where I have a webpage featuring a countdown alongside some dynamic data refreshed via AJAX. To optimize server load, I found a clever solution by adjusting the AJAX refresh interval based on the time remaining in the countdown, foll ...

		
javascriptajaxrefresh

      

    

  



  

    

      

        
        
JavaScript JCrop feature that allows users to resize images without cropping

        
I'm currently attempting to utilize JCrop for image cropping, but I'm running into frustratingly incorrect results without understanding why. The process involves an image uploader where selecting an image triggers a JavaScript function that upda ...

		
javascriptjquerywebjcrop

      

    

  



  

    

      

        
        
The CSS selector seems to be malfunctioning

        
I am facing an issue with calling HTML elements from CSS using CSS selectors. It's strange that the class selectors work fine, but I'm unable to select the elements directly from CSS. Therefore, I had to assign them classes.

What I aim to achiev ...

		
htmlcsscss-selectors

      

    

  



  

    

      

        
        
Avoiding memory leaks in Node.js with Express framework

        
Dealing with memory leaks in nodejs (express.js) has been a challenge for me. I followed various tutorials online, but unlike the examples provided, identifying the source of the leak in my code has not been straightforward. Through the use of Chrome Dev T ...

		
javascriptnode.jsexpressmemory-leaksgoogle-chrome-devtools

      

    

  



  

    

      

        
        
JavaScript Array Objects

        
As a newcomer to the world of Javascript, I've decided to take on the challenge of creating a blackjack game.

Utilizing arrays and objects for my game:

card = {}, //each card is represented as an object with suit, number, and points properties
playe ...

		
javascriptarraysobject

      

    

  



  

    

      

        
        
Refining the options in security question dropdown menus

        
Firstly: The title should mention filtering security options in dropdown lists, but it seems I'm restricted from using the term questions or question in the title.

I came across this code example, but it appears to be outdated. Does anyone know why a ...

		
javascriptjqueryhtmlajax

      

    

  



  

    

      

        
        
What is the best way to transfer a variable from a node server to a javascript client when the page is first

        
My web application is mainly static, but I need to dynamically send the user's username if they are logged in and the room name they specify in the URL to the client-side JavaScript upon page load. Finding a simple solution has been challenging for me ...

		
javascriptjquerynode.jsexpresscookies