Spectacle “chargement” de l'animation sur le bouton cliquez sur

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 soumettre. Il montre que le "chargement" d'animation gif jusqu'à ce qu'il obtient la réponse du serveur.

Mais j'ai été aux prises depuis longtemps.

Comment puis-je mettre en œuvre cette?

  • êtes-vous à l'aide d'ajax ?? ou simplement poster le formulaire ??
  • Je peux utiliser ajax ainsi... mais pour l'instant ce qu'il est.
  • double possible de Jquery Ajax Chargement de l'image
  • si je post forme alors, comment pouvez charger une image ?
  • visitez: ce lien, vous obtiendrez une aide
InformationsquelleAutor Fraz | 2013-03-08
  1. 34

    Si vous êtes en utilisant ajax alors (pour la rendre aussi simple que possible)

    1. Ajouter votre chargement image gif html et de les rendre cachés (à l'aide de style dans le html lui-même maintenant, vous pouvez l'ajouter à séparer CSS):

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

    2. Montrer l'image lorsque le bouton est cliqué, et de le cacher à nouveau sur la réussite de la fonction

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

    Assurez-vous de cacher l'image sur l'ajax d'erreur rappels trop à assurez-vous que le gif se cache même si l'ajax échoue.

    • Vous devez utiliser la totalité de la fonction de rappel pour masquer l'image au lieu de l'appeler en deux endroits.
    InformationsquelleAutor bipen
  2. 7

    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

    dans le cas où vous décidez face à l'ajax

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

    Le meilleur de chargement et de blocage particulier div ajax pour appeler jusqu'à ce qu'il a réussi 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>

    script

    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ère que cela aide vraiment il est très interactif.

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

        },
        complete : function() {
           //remove loading gif
        }
    });
});
    InformationsquelleAutor Angel
  5. 0
                //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 () {
                    })
                });
            });
    InformationsquelleAutor Mohamed.Abdo
  6. 0

    Je le sais très bien réponse tardive mais j'ai vu cette requête récemment Et a trouvé un scénario de travail,

    OnClick de Soumettre utiliser le code ci-dessous:

     $('#Submit').click(function ()
 { $(this).html('<img src="icon-loading.gif" />'); //A GIF Image of Your choice
 return false });

    Pour Arrêter le Gif utiliser le code ci-dessous:

    $('#Submit').ajaxStop();

    InformationsquelleAutor Anil Baggio