Showing Busy loading Indicator during an AJAX Request using jQuery

Question

I have status active/Deactive Buttons when user clicks on active status it turns into deactive with red color and vice versa

currently i'm able to update my status @backend but everytime i should refresh to see my changes!!

my requirement is during active/deactive process of changing status i want to load ajax image loader where loader image should overlay entire screen. and my status should be updated in mysql db!!

please any help is appricated Thanks!

Php Code

<?php 
    include 'db.php';
    $sql = "select * from sections order by id asc";
    $data = $con->query($sql);
    $str='';
    if($data->num_rows>0)
    {
        while( $row = $data->fetch_array(MYSQLI_ASSOC))
        {
            $str.="
        "?>
        <div class="row">
            <div class="col-md-1">
            <?php 
                if ($row['status'] == '1') 
                { 
            ?>
        <a href="#" class="btn btn-success btn-sm active" ida='<?php echo $row['id'];?>'></a>
        <?php } 
        else if($row['status'] == '0')
        {
        ?>
        <a href="#" class="btn btn-danger btn-sm deactive" idde='<?php echo $row['id'];?>'></a>
        <?php } ?>
        </div>
        </div>
    <?php
        }
    }
    else
    {
        $str .= "<p style='text-align:left;'>No Data Available</p>";
    }
    echo $str;   
?>

Jquery Code

<script type="text/javascript">
$('body').delegate('.active','click',function(e){

    var IdStatus = 0;
    var id = $(this).attr('ida');
    $.ajax({
        url:"pages/status1.php",
        data:{
            status:IdStatus,
            id:id
        },
        dataType:'html',
        success:function()
        {
            alert('success');
        }
    });
    e.preventDefault();
    return false;
});

$('body').delegate('.deactive','click',function(e){
    var IdStatus = 1;
    var id = $(this).attr('idde');
    $.ajax({
        url:"pages/status1.php",
        data:{
            status:IdStatus,
            id:id
        },
        dataType:'html',
        success:function()
        {
            alert('success');
        }
    });
    e.preventDefault();
    return false;
});
</script>

PHP Updation Code

<?php 
    if(isset($_REQUEST['status']))
    {
    $status = $_REQUEST['status'];
    $id = $_REQUEST['id'];
    $sql = 'update sections set status='.$status.' where id='.$id.'';
    $result = mysql_query($sql);
    if($result)
    {
        echo 'updated successfully';
    }
    else
    {
        echo 'failed to update';
    }
}
?>

Answer 1

Try this script with mentioned changes:

Changes:

1. Keep same attribute as data-id for both the operations
2. loaderElem will be the loader container which should be there in your DOM
3. BODY is nothing but a body selector, just to avoid redundant selectors
4. var elem = $(this); is used as I need this reference after success callback
5. Also make habit of using error callback as you might need to handle that case

var BODY = $('body');
var loaderElem = $('#loader');
BODY.delegate('.active', 'click', function(e) {
  loaderElem.show();
  var IdStatus = 0;
  var elem = $(this);
  var id = elem.attr('data-id');
  $.ajax({
    url: "pages/status1.php",
    data: {
      status: IdStatus,
      id: id
    },
    dataType: 'html',
    success: function() {
      elem.removeClass('active').addClass('deactive');
      loaderElem.hide();
      alert('success');
    }
  });
  e.preventDefault();
  return false;
});
BODY.delegate('.deactive', 'click', function(e) {
  loaderElem.show();
  var IdStatus = 1;
  var elem = $(this);
  var id = elem.attr('data-id');
  $.ajax({
    url: "pages/status1.php",
    data: {
      status: IdStatus,
      id: id
    },
    dataType: 'html',
    success: function() {
      elem.removeClass('deactive').addClass('active');
      loaderElem.hide();
      alert('success');
    }
  });
  e.preventDefault();
  return false;
});

Answer 2

Try using beforeSend option of $.ajax()

$('body').delegate('.active','click',function(e){

    var IdStatus = 0;
    var id = $(this).attr('ida');
    $.ajax({
        url:"pages/status1.php",
        beforeSend: function() {
          // do overlay stuff
        },
        data:{
            status:IdStatus,
            id:id
        },
        dataType:'html',
        success:function()
        {
            // remove overlay stuff
            alert('success');
        }
    });
    e.preventDefault();
    return false;
});