Mostra animazione "caricamento" sul pulsante clic

Question

Voglio fare qualcosa di molto semplice. Ho un pulsante nella mia pagina.

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

Ora quello che voglio è quando l'utente preme questo pulsante di invio. Mostra che "carica" ​​l'animazione gif fino a quando ottiene la risposta dal server.

Ma ho lottato da molto tempo.

Come implementarlo?

Answer 1

provare

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

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

}); 
}); 

EDIT: dopo aver letto i commenti

nel caso in cui si decide contro l'Ajax

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

Answer 2

Se si utilizza Ajax, allora (che lo rende il più semplice possibile)

1. aggiungere l'immagine gif carico in html e renderlo nascosto (utilizzando lo stile in html per sé ora, è possibile aggiungerlo per separare i CSS):

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

2. Mostra l'immagine quando fa clic sul pulsante e nascondere di nuovo in caso di successo funzione

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

assicurati di nascondere l'immagine in caso di errore callback Ajax troppo per assicurarsi che la gif nasconde anche se l'Ajax non riesce.

Answer 3

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

     }, 
     complete : function() { 
      //remove loading gif 
     } 
    }); 
}); 

Answer 4

Il meglio di carico e bloccando quel particolare div per chiamata AJAX fino a quando non è riuscito è Blockui

passare attraverso questo link http://www.malsup.com/jquery/block/#element

esempio di utilizzo:

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

sceneggiatura

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' } 
    }); 

} 
}); 

spero che questo aiuti davvero è molto interattivo.

Answer 5

  //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() { 
        }) 
       }); 
      }); 

Answer 6

So che questa risposta molto tardi, ma ho visto questa domanda di recente e ho trovato uno scenario di lavoro,

OnClick Invia utilizzo il codice qui sotto:

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

per fermare il Gif utilizzare il codice qui sotto:

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