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!