CODEWITHSUNDEEP
javascriptjqueryloading
renata costa
renata costa

Reputation: 177

loading div not working on jquery

my html:

<span id="loading"><img src="ajax-loader.gif" /> Please Wait</span>


#loading{display:none;}

my js:

var Progressajax = false;

$(function() {
  $(".commentmoreview").click(function(){

    if(Progressajax) return;
    Progressajax = true;

    var element = $(this);
    var id = element.attr("id");

    $('#loading').show();

    var value = $('.pagecont'+id).val();
    var info = 'id='+id+'&pagecont='+value;

    $.ajax({
      type: "POST",
      url: "php-comments/php/loadmorecomments.php",
      data: info,
      success: function(data){
        $('#loading').hide();
          Progressajax = false;
        value = parseInt(value)+parseInt(5);
        $('.pagecont'+id).val(value);
        $(data).hide().prependTo('#loadmorecomments'+id).fadeIn(1000);
        //$('#loadmorecomments'+id).prepend(data);
      }
    });
  });
});

what is wrong that loading span is not working?

thank you friends!

Upvotes: 1

Views: 1198

Answers (2)

Avishek
Avishek

Reputation: 1896

The best way to show loader image while making ajax calls is using Ajax Global Events

$(document).bind("ajaxSend", function(){
  $("#loading").show();
}).bind("ajaxComplete", function(){
  $("#loading").hide();
});

Upvotes: 1

itssajan
itssajan

Reputation: 830

can you change

$('#loading').show();

to 

$('#loading').attr("display","block");

and try to use it like this

$.ajax({
  type: "POST",
  url: "php-comments/php/loadmorecomments.php",
  data: info,
  beforeSend: function(){
    $('#loading').attr("display","block");
  },
  success: function(data){
    $('#loading').attr("display","none");
      Progressajax = false;
    value = parseInt(value)+parseInt(5);
    $('.pagecont'+id).val(value);
    $(data).hide().prependTo('#loadmorecomments'+id).fadeIn(1000);
    //$('#loadmorecomments'+id).prepend(data);
  }
});

Upvotes: 0

Related Questions