web-dev-qa-db-fra.com

Afficher l'animation "en cours de chargement" en cliquant sur un bouton

Je veux faire quelque chose de très simple ... J'ai un bouton dans ma page.

<form action="/process" method="POST">
   <input class="btn btn-large btn-primary" type="submit" value='Analyze Topics'>
    </form>

Maintenant, ce que je veux, c’est quand l’utilisateur appuie sur ce bouton d'envoi. Il montre que "charger" une animation gif jusqu'à ce qu'il obtienne la réponse du serveur.

Mais je me bats depuis longtemps.

Comment puis-je mettre en œuvre cela?

jqueryhtmlcssajax
26
Fraz

Si vous utilisez ajax alors (en le rendant aussi simple que possible)

  1. Ajoutez votre image de chargement gif au format HTML et masquez-la (en utilisant le style HTML lui-même, vous pouvez l'ajouter à un fichier CSS séparé):

    <img src="path\to\loading\gif" id="img" style="display:none"/ >

  2. Afficher l'image lorsque le bouton est cliqué et la cacher à nouveau en cas de succès

    $('#buttonID').click(function(){
  $('#img').show(); //<----here
  $.ajax({
    ....
   success:function(result){
       $('#img').hide();  //<--- hide again
   }
}

Assurez-vous également de masquer l'image lors des rappels d'erreur ajax pour vous assurer que le gif est masqué, même en cas d'échec de l'ajax.

33
bipen

essayer 

$("#btnId").click(function(e){
 e.preventDefault();
 //show loading gif

 $.ajax({
  ...
  success:function(data){
   //remove gif
  },
  error:function(){//remove gif}

 });
});

EDIT: après avoir lu les commentaires 

au cas où vous décidez contre l'ajax

$("#btnId").click(function(e){
     e.preventDefault();
     //show loading gif
     $(this).closest('form').submit();
});
6
dakait

Le meilleur chargement et blocage de cette division particulière pour un appel ajax jusqu’à ce qu’il réussisse est Blockui

passer par ce lien http://www.malsup.com/jquery/block/#element

exemple d'utilisation:

 <span class="no-display smallLoader"><img src="/images/loader-small.png" /></span>

scénario

jQuery.ajax(
{   
 url: site_path+"/restaurantlist/addtocart",
 type: "POST",
 success: function (data) {
   jQuery("#id").unblock(); 
},
beforeSend:function (data){
    jQuery("#id").block({ 
    message: jQuery(".smallLoader").html(), 
    css: { 
         border: 'none', 
         backgroundColor: 'none'
    },
    overlayCSS: { backgroundColor: '#afafaf' } 
    });

}
});

espérons que cela aide vraiment, il est très interactif.

5
Rajat Modi
$("#btnId").click(function(e){
      e.preventDefault();
      $.ajax({
        ...
        beforeSend : function(xhr, opts){
            //show loading gif
        },
        success: function(){

        },
        complete : function() {
           //remove loading gif
        }
    });
});
3
Angel
            //do processing
            $(this).attr("label", $(this).text()).text("loading ....").animate({ disabled: true }, 1000, function () {
                //original event call
                $.when($(Elm).delay(1000).one("click")).done(function () {//processing finalized
                    $(this).text($(this).attr("label")).animate({ disabled: false }, 1000, function () {
                    })
                });
            });
0
Mohamed.Abdo