jquery

2012-12-04 34 views
5

में परिणाम भेजने से पहले लोडिंग दिखाएं मेरे पास AJAX के साथ एक jQuery मोडल विंडो में सामग्री भेजने के लिए एक साधारण jquery कोड है! सबकुछ बिना किसी समस्या के काम कर रहा है। सामान्य में,, 1-2 सेकंड के लिए इस कोड के बाद परिणाम दिखा भेजें बटन पर क्लिक करने के बाद,jquery

function AddFastqpro(action) { 
    var b = {}; 
    b[dle_p_send] = function() { 
     var response = $('#dle-poke').val() 
     $.post(dle_root + 'engine/ajax/fast.php', { text: response, action: action }, 
     function (data) { 
      if (data == 'ok') { 
       DLEalert(dle_p_send_ok, dle_info); 
      } 
      else { DLEalert(data, dle_info); } 
     }); 
    }; 

    $('body').append("<div id='dlepopup' style='display:none'><textarea id='dle-poke'></textarea></div>"); 

    $('#dlepopup').dialog({ 
     autoOpen: true, 
     modal: true, 
     draggable: false, 
     width: 350, 
     dialogClass: "modalfixed", 
     buttons: b 
    }); 
}; 

मेरा प्रश्न है, मैं कैसे जोड़ सकते हैं और भेजें पर क्लिक करने के बाद और परिणाम दिखाने से पहले एक लोड हो रहा है चित्र दिखा सकते हैं ?

+1

लोड छवि प्रदर्शित कर सकते इतने पर उदाहरण के लिए इस पेज पर संबंधित मदों की जांच ... –

+0

मैं अपने क्लिक करें घटना वहाँ –

+0

http नहीं दिख रहा है: //stackoverflow.com/questions/2257975/using-beforesend-and-complete-with-post –

उत्तर

13

आप ajaxStart() करके ऐसा कर सकते हैं और ajaxComplete()

$("#loading").ajaxStart(function(){ 
    $(this).show(); 
}); 

$("#loading").ajaxComplete(function(){ 
    $(this).hide(); 
}); 

या

$.ajax({ 
    url : dle_root + 'engine/ajax/fast.php', 
    data: { text: response, action: action }, 
    beforeSend: function(){ 
    $("#loading").show(); 
    }, 
    complete: function(){ 
    $("#loading").hide(); 
    }, 
    success: function (data) { 
     if (data == 'ok') { 
      DLEalert(dle_p_send_ok, dle_info); 
     } 
     else { DLEalert(data, dle_info); } 
    }); 
}); 
+0

जहां मुझे यह कोड रखना चाहिए? – Alireza

+0

@ एलीरेज़ा आपका बहुत स्वागत है ,,, –

1

आप $.post() के बजाय $.ajax() उपयोग कर सकते हैं, और जोड़ने के एक beforeSend समारोह

5
$('#button').click(function(){ 
    $('#loading-div').html('<img src="..." />'); 
    $.ajax({ 
     type: 'POST', 
     url: '...', 
     data: {...}, 
     success: function(response) { 
      $('#loading-div').html(''); 
     } 
    }); 
}); 

मामले में अगर आपके पासके साथ बटन है, और कुछ <div id="loading-div"></div> जिसमें आप, उपलब्ध नमूनों की

http://api.jquery.com/jQuery.ajax/

+0

फिर भी यह सबसे अच्छा जवाब है! – proofzy