CODEWITHSUNDEEP
javascriptjqueryasp.netvb.netvisual-studio-2010
Blagojevic
Blagojevic

Reputation: 3

Display gif on button click and hide after function finish in asp.net

How can i show a gif after buttonclick and hide it when a function is finished?

<ISWebDesktop:WebButton ID="Button1" runat="server" Height="20px" Text="Ablehnen" meta:resourcekey="btnAblehnen" Width="75px"
                        AutoPostback="True" PostBackMode="FullPostBack">                    
                    </ISWebDesktop:WebButton>

 <asp:Image ID="emailLoader2" runat="server" ImageUrl="../../images/ajax-loader2.gif" Visible="false"/>

Codebehind: 

Protected Sub Button3_Clicked(ByVal sender As Object, ByVal e As ISNet.WebUI.WebDesktop.WebButtonClickedEventArgs) Handles Button3.Clicked
    //show the gif
    Dim msg As String = "OK"
    Dim spezial As Integer = 0
    .....
    //hides the gif
    END SUB

Upvotes: 0

Views: 822

Answers (1)

Bandon
Bandon

Reputation: 809

You should use jquery to get data asynchronously. Assuming your current page is index.html, which contains:

<p style="display: none;"><img src="loading.gif" />Loading...</p>

It's a hidden loading bar. Then, use jquery .post or .get method to get data from your another page like:

$.get("test.asp", function () {
    $("img").delay(500).hide();
    $("p").text("Loading Complete.");
});

So here's the final calling order:

  1. Click button in index.html
  2. Shows loading bar
  3. Jquery calls .get() function to execute test.asp
  4. After test.asp execution finished, hide the loading gif, change the loading text.

Upvotes: 1

Related Questions