CODEWITHSUNDEEP
javascriptasp.net
Hello World
Hello World

Reputation: 57

want to show "Loading" text using javascript?

I am using SmtpClient's Send method in ASP.NET to send email from a contact-us page. While the message is being sent, I want to show a loading image. More specifically, when a user presses the send button to send the email, the loading image will appear, and once the message is sent, the loading image will disappear. I know I can use onclick method to display the loading image. But how can I remove this image once the message is sent?

Upvotes: 0

Views: 789

Answers (4)

nunespascal
nunespascal

Reputation: 17724

Encapsulate your button in an update panel.

You can use the updateprogress template to show a loading sign then.

<asp:updatepanel id="MailUpdatePanel" runat="server">    
<contenttemplate>


<asp:updateprogress id="UpdateProgress1" runat="server" associatedupdatepanelid="MailUpdatePanel" dynamiclayout="true">
      <progresstemplate>
            <img src="images/loading.gif">
        </progresstemplate>
 </asp:updateprogress>
<asp:Button ID="SendMail" runat="server" OnClick="SendMail_Click" Text="Mail" />
</contenttemplate>
</asp:updatepanel>

If you are new to update panels take a look at this introduction to update panels

Upvotes: 3

Alireza
Alireza

Reputation: 4516

Best way to do so , if you're using ajax , is to invoke the loading image when the user clicks the button , and dispose it when the transaction is done.
Here's an example using jquery ajax :

HTML :

<input type='submit' ... onlick='$("#loading").fadeIn();'>

Js :

 $.post($('FORM').attr('action'),
        {{args you wanna pass}},
        function (data) {
            process_callback_data(data);
            $("#loading").fadeOut();
        });

Upvotes: 0

Shyju
Shyju

Reputation: 218732

If you are using jQuery

$("#btonId").click(function(e){
 e.preventDefault();

 $("#loadingDiv").html("Sending...").fadeIn(300,function(){
   $.post("yourserverpage.aspx", { data : somedata },function(response){
       if(response=="sent")
       {
         $("#loadingDiv").html("Email Sent")
       }
       else
       {
           $("#loadingDiv").html("error in sending!");
       }       
   });

 });
});

Assuming btnId is the ID of the button to send and loadingDiv is the ID of the div where you want to show loading message and after sending the email, you are returning a string "sent", if it is successful.

Upvotes: 1

Phillip Schmidt
Phillip Schmidt

Reputation: 8818

I would invoke your send method/action via ajax, and then on the success callback, hide the loading div.

You may also want to add an error handler to the ajax call, so that if the message can't be sent, the loading text won't just stay there.

Upvotes: 1

Related Questions