add loader to ajax code - php

Question

I have ajax script that print comment
I would like to add loader while the server query works
what do I need to add to the "success" in order to see LOADER in my html page?
function printComments (obj) {
var element = $(obj);
var contactID = element.attr("contactID");
var type = element.attr("id");
var info = 'contactID=' + contactID + "&type=" + type + "&catID=" + catID;
$("#loader").html('<img src="images/loading.gif" align="absmiddle">');
// alert(info);
$.ajax({
type: "POST",
url: "ajax/followPrint.php",
data: info,
success: function(msg){
if (type == "followsTab")
$("#follows").html(msg);
if (type == "commentsTab")
$("#commentsContent").html(msg);
}
});
return false;
}

Answer 1

You can just play with hide() and show() like,
function printComments (obj) {
var element = $(obj);
var contactID = element.attr("contactID");
var type = element.attr("id");
var info = 'contactID=' + contactID + "&type=" + type + "&catID=" + catID;
$("#loader").show(); // displaying loader here
$.ajax({
type: "POST",
url: "ajax/followPrint.php",
data: info,
success: function(msg){
if (type == "followsTab")
$("#follows").html(msg);
if (type == "commentsTab")
$("#commentsContent").html(msg);
$("#loader").hide(); // hiding loader here
}
});
//return false;
}

Answer 2

example
HTML
<a href="#" id="verification" >test</a>
<img src="example_preloader.gif" id="ajaxPreloader" style="display:none" />
JS
$('#verification').click(function() {
$('#ajaxPreloader').toggle();
$.ajax({
type : "POST",
url : "example url",
data : {'exampleData': ''},
success : function(msg) {
$('#ajaxPreloader').text('');
location.reload();
},
error: function(error) {
$('#ajaxPreloader').text('');
}
});
});

Answer 3

Use beforeSend to show the loader and then in succes function hide that loader
$.ajax({
type: "POST",
url: "ajax/followPrint.php",
data: info,
beforeSend:function(){
$("#loader").show();
},
success: function(msg){
$("#loader").hide();
if (type == "followsTab")
$("#follows").html(msg);
if (type == "commentsTab")
$("#commentsContent").html(msg);
}
});

Answer 4

Try Below code:
$.ajax({
type: "POST",
url: "ajax/followPrint.php",
data: info,
**beforeSend: function() {
$("#loader").html("<img src="images/loading.gif" align="absmiddle">");
},**
success: function(msg){
$('#loader').hide();
if (type == "followsTab")
$("#follows").html(msg);
if (type == "commentsTab")
$("#commentsContent").html(msg);
}
});
added this line of code extra:
beforeSend: function() {
$("#loader").html("<img src="images/loading.gif" align="absmiddle">");
},

Answer 5

function printComments (obj) {
var element = $(obj);
var contactID = element.attr("contactID");
var type = element.attr("id");
var info = 'contactID=' + contactID + "&type=" + type + "&catID=" + catID;
$("#follows").html('<img src="images/loading.gif" align="absmiddle">');
$("#commentsContent").html('<img src="images/loading.gif" align="absmiddle">');
//loader will hide replaced by output while the server query works
$.ajax({
type: "POST",
url: "ajax/followPrint.php",
data: info,
success: function(msg){
if (type == "followsTab")
$("#follows").html(msg);
if (type == "commentsTab")
$("#commentsContent").html(msg);
}
});
return false;
}