Having trouble with my ASP.Net OnClick Subs not functioning as desired

I have implemented onClick handlers to process button clicks that query SQL. The issue I am facing is that these queries sometimes take between 10 to 30 seconds to return a response. To prevent click-stacking during this time, I disabled the buttons. However, now I want to display a loading gif while the subroutine completes its task.

The desired flow would be: click -> button disabled -> loading gif shows up -> onClick sub completes -> loading gif disappears -> more Ajax operations on the same page

Below is an example of what my button code looks like:

<asp:Button ID="buttonOne" runat="server" Visible="False" Text="Next" OnClientClick="this.disabled=true;" UseSubmitBehavior="false" OnClick="userName_Click"/>

And here is the code behind:

Sub userName_Click(ByVal sender As Object, ByVal e As EventArgs)
    showWidget(True)
    'This part takes a few seconds
    If usernameIsValid(textField.Text) Then 
        buttonTwo.Visible = true
        labelTwo.Visible = true  
        buttonOne.Visible = false
        labelOne.Visible = false
     End If
    showWidget(False)
End Sub

Currently, the loading image does not load (only displays showWidget(False)). How can I link the loading image to the button click and make it disappear after the click action subroutine finishes?

Thank you!

Answer №1

Attempting this method is not recommended. It is advised to implement an HTML button and upon clicking it, execute your server-side function via AJAX. Afterwards, display your desired animation or GIF using jQuery/Bootstrap.

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

Keep a vigilant eye on the peak utilization of memory within the Node.js process

I am in search of a way to effectively monitor the maximum memory usage in a Node.js process, regardless of whether there are memory leaks or not. The processes in question include both real applications and synthetic tests. My expectation is that it sho ...

Is it necessary for material-ui useStyles to use the entire props object?

Perusing through the documentation, it suggests that in order for our component to accommodate style overrides using classes, we are advised to provide the entire props object to the useStyles hook: function Nested(props) { const classes = useStyles(prop ...

How can you generate a Ref in React without utilizing the constructor by using React.createRef?

In the past, I relied on using constructor in React for just three specific purposes: 1. Initializing state as shown below: class App extends React.Component { constructor(props) { super(props); this.state = { counter: 0 }; } } H ...

transferring data from JavaScript on the client side to Express on the server side

Using JavaScript, I have created the HTML DOM that you see in the code below. Now, my goal is to send the value of an input created in JavaScript to the server side. The server is built with node.js and express framework. Once the value is sent to the serv ...

refetchQueries may be effective for specific queries

Using a Friend component within my AllFriends screen triggers the following mutation: const [deleteUserRelation] = useDeleteUserRelationMutation({ onCompleted: () => { Alert.alert('Unfriended'); }, refetchQueries: [{ query: ...

I'm looking for a method to retrieve the value of an option tag and then pass it to a helper within handlebars. Can someone

Currently, I am utilizing express and handlebars in my project. I have a specific view where I aim to display certain information based on the event when a client selects an option from a select tag. However, I have some queries regarding this: Is it fea ...

Maximizing efficiency in processing multiple requests simultaneously using ajaxSetup's data

I need to enhance an existing ajax request within our CMS by adding additional data. Specifically, I am working with a media library that loads image data (json), and I want to incorporate more images from an external source. var promise_waiting = []; jQu ...

What is the process by which HTML strings are being attached to an output variable and how does the join function affect the map method?

I am encountering some difficulty grasping the significance of this section of code. I have included a large portion of the code to provide context and aid in understanding what the original author intended with this code snippet. Within the replaceTempla ...

Using jQuery to toggle sliding the information above a div

I am facing an issue with my customized sliding menu. The menu slides over the image but not over the content-div, pushing it aside. I have tried to fix this problem but haven't found a solution yet. My goal is for the menu to slide over all divs and ...

Is there anybody who can assist me with ${}?

Having an issue with using ${'variable'+i} in a loop function. The goal is to call each function from a loop. Explored template literals but couldn't find a solution for this specific problem. Desired format: ${'variable'+i} // (w ...

How to Store and Retrieve User-specific Data using Express and Mongoose?

Currently, I am developing a small single-page application that allows users to login using PassportJs and Mongoose. One of the main features I am working on is enabling users to log in and have a unique todo/task list associated with each user. I succes ...

Having troubles with the xml2json jQuery plugin's functionality?

I've implemented the jQuery XML to JSON Plugin by Fyneworks.com. Any idea why my code isn't functioning as expected? index.html <!DOCTYPE html> <html> <head> <script src="build/jquery.xml2json.js"></script> <sc ...

Webshot is unable to retain any images

I attempted to utilize the Node package Webshot. The function is being executed, "OK" is printed to the console, but no files are saved to the specified folder. What could I be overlooking? if (Meteor.isServer) { var webshot = Meteor.npmRequire(&apos ...

Local Storage State Persistence Issue with React Checkbox Component

I am currently working on a React component that features a checkbox. My goal is to have the checkbox toggle between on and off states and save this state in local storage so that even when navigating to another page, the toggle will remain in its previous ...

Bringing in JavaScript files from a Bootstrap theme to incorporate them into a Vue3 application

Incorporating Bootstrap 5, a HTML theme with a CSS bundle file, and separate JS bundle files (main JS bundle file and plugin bundle file) containing Bootstrap code base + custom template features into a Vue 3 project is my current objective. I aim to utili ...

Could somebody provide clarification on the functions being called in the Angular Test Code, specifically evaluate() and dragAndDrop()?

Exploring the drag and drop functionality of an angular-Gridster application using Protractor with a test code. I have some questions about the functions being used in the code snippet below. Can someone clarify the purpose of evaluate() - the API definit ...

Event handling in Node.js can sometimes result in throwing exceptions

I need advice on how to handle errors or return values from an event in my code. Here is what it looks like: _initConnection(){ try{ const errorValidation = this.errorValidation const HOST = "192.168.2.32" ...

Using InputAdornment with MUI AutoComplete causes the options list to disappear

I created a custom AutoComplete component with the following structure: https://i.sstatic.net/xcv9y.png <Autocomplete freeSolo size="small" id="filter-locks-autocomplete" options={json_list ? json_list : []} groupBy={(optio ...

Function Errors, How to Fix Them?

I've recently developed a tool for character creation within a new video game. However, I'm currently facing an issue: When it comes to assigning points in Magic Power or Weapon Power for the Warrior and Wizard characters, there seems to be a p ...

Site deployment is missing the namespace, although it functions correctly when tested locally

My website that I host is experiencing issues and displaying an error message. **The name 'General' does not exist in the current context** Line 19: if (passedArgument == "true") Line 20: { Line 21: General.Session.UserID = ""; ...