2015-02-09 38 views
1

我有打印发表评论 AJAX脚本我想补充装载机在服务器查询工作插件加载器的AJAX代码

什么,我需要添加到“成功”才能看到LOADER在我的HTML页?

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; 

} 

回答

0

你可以只用隐藏()和show()一样玩,

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; 

} 
0

例如

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

使用beforeSend展示装载机然后在成功功能中隐藏该加载器

$.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);  
    } 
}); 
0

尝试下面的代码:

$.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);  
     } 
    }); 

加入额外这行代码:

beforeSend: function() { 
       $("#loader").html("<img src="images/loading.gif" align="absmiddle">"); 
       }, 
0

功能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">'); 

//加载器将隐藏e。通过输出取代,而服务器查询工作

$.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; 

}