Question

Right .. I have the following:

$(document).ready(function() {
  var index = 2;
  $('#addElement').click(function() {
    var data = 'index='+index;
    $.get('/ajax/lo_add.php', data, function(response){
      var new_div = $(response).hide();
      $('#dynform').append(new_div);
      new_div.slideDown();
      $(".chzn-select").chosen();
      $('.onlyNums input').autotab_magic().autotab_filter('numeric');
      index++;
    });
  });
});

Which took me all day to have it properly working (very2 new here) .. thing is how can I put on a loading image (loader.gif) let say in a div call “loader” whilst the process of appending takes place. And perhaps to have a delay function for testing purposes as just to test its loading session.

Answer 1

You may show a loader in before calling the ajax and hide it in the callback of slideDown method.

$(document).ready(function() {

  $("#loader").hide();
  var index = 2;

  $('#addElement').click(function() {

     $("#loader").html("loading..").fadeIn(400,function(){
        var data = 'index='+index;
       $.get('/ajax/lo_add.php', data, function(response){

            var new_div = $(response);
            new_div.appendTo($('#dynform')).slideDown(100,function(){

              $(".chzn-select").chosen();
              $('.onlyNums input').autotab_magic().autotab_filter('numeric');
              index++;
              $("#loader").fadeOut(300);

            });     
       });

    });

  });

});

You can show an image instead of the loading text by chnaging it to

$("#loader").html("<img src='someLoader.gif' />").fadeIn(400,function(){