बटन पर "लोडिंग" एनीमेशन दिखाएं

Question

मैं कुछ बहुत आसान करना चाहता हूं। मेरे पास मेरे पृष्ठ में एक बटन है।

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

अब जब मैं यह सबमिट बटन दबाता हूं तो मैं क्या चाहता हूं। यह दिखाता है कि "लोडिंग" gif एनीमेशन जब तक कि यह सर्वर से प्रतिक्रिया प्राप्त नहीं करता है।

लेकिन मैं लंबे समय से संघर्ष कर रहा हूं।

मैं इसे कैसे कार्यान्वित करूं?

Answer 1

कोशिश

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

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

}); 
}); 

संपादित करें: मामले में टिप्पणी

को पढ़ने के बाद आप ajax के खिलाफ फैसला

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

Answer 2

आप तो ajax उपयोग कर रहे हैं (जो इसे के रूप में संभव के रूप में सरल)

1. HTML और इसे छिपा बनाने के लिए अपने लोड हो रहा है gif छवि जोड़ें (अब एचटीएमएल अपने आप में शैली का उपयोग, आप सीएसएस अलग करने के लिए जोड़ सकते हैं):

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

2. चित्र दिखाएं बटन क्लिक होने और सफलता पर फिर से इसे छिपाने समारोह

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

सुनिश्चित करें कि आप छवि ajax त्रुटि पर भी कॉलबैक यकीन है कि gif छुपाता है, भले ही ajax विफल रहता है बनाने के लिए छिपाने करें।

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

सबसे अच्छा लदान और ajax कॉल के लिए है कि विशेष रूप div अवरुद्ध जब तक यह सफल रहा Blockui

है

इस लिंक के माध्यम से जाने http://www.malsup.com/jquery/block/#element

उदाहरण उपयोग:

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

स्क्रिप्ट

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

} 
}); 

उम्मीद है कि यह वास्तव में मदद करता है यह बहुत ही संवादात्मक है।

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

मैं यह एक बहुत ही ज्यादा देर जबाब पता, लेकिन मैं हाल ही में इस क्वेरी को देखा और एक काम परिदृश्य पाया,

उपयोग नीचे कोड प्रस्तुत करें OnClick:

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

Gif बंद करो करने के लिए नीचे दिए गए कोड का उपयोग करें:

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