如何在ajax过程中显示加载动画和禁用按钮

Question

i am using ajax to send id of button to test.php,But i am stuck on the step how to disable button and show processing image gif during ajax process ,

when i use my code it only disable and hide on first table row button not specific button that was clicked

my code is this

     <tbody>

   <?php

   $letter=mysqli_query($con,"SELECT * FROM letters order by id DESC");



             if(mysqli_num_rows($letter)>0){
        while($rows_letter=mysqli_fetch_array($letter))

        {
$id=$rows_letter['id'];
$subject=$rows_letter['subject'];
$status=$rows_letter['status'];
?>

    <tr>
      <th class="text-center" scope="row">1</th>
      <td class="text-center"><?php echo $subject ;?></td>
      <td class="text-center"><?php if($status == 1){echo '<mark style="background-color: #5cb85c; color:white;" > Successfully Sent </mark>'; }else{ echo '<mark  style="background-color:#f0ad4e; color:white;"> Not  Sent Yet </mark>';}?></td>
      <td><button type="button" class="btn btn-info btn-sm btn-block">
      <span class="fa fa-pencil-square-o"></span> Edit</button></td>
      <td><button type="button" class="btn btn-danger btn-sm btn-block"> <span class="fa fa-trash-o"></span>  Move To Trash</button></td>
      <td>
      <img src="https://svc.opushealth.com/balcoltrasavings/img/Processing.gif" id="img" style="display:none"/>
      <button type="button" onclick="startsend(<?php echo $id;?>);"
      id="id"  value="<?php echo $id;?>"class="btn btn-success btn-sm btn-block">
      <span class="fa fa-paper-plane-o"></span> Send To All</button></td>
    </tr>


      <?php

        }

             }      

          ?>
     </tbody>
       <script type='text/javascript'>

    //AJAX function
   function startsend(id) {
       $('#img').show(); 
       $("#id").attr("disabled", true);
      $.ajax({
        type: "POST",
        url: "test.php",
        data:{ id: id },
        success: function(msg){
        alert( "Button Id is " + msg );
         $('#img').hide();

        }
      });
    }

</script>

test.php file is

 <?php

if(isset($_POST['id'])){
$id = $_POST['id'];}
///rest process
?>

Answer 1

Firstly you need to remove any id attributes you create in your HTML within the loop in your PHP, as this will create duplicates which is invalid. Instead change them to classes.

Secondly, attach your events using unobtrusive event handlers, not inline ones as they are outdated and bad practice. As you're using jQuery this can be done with the click() or on() methods.

Lastly, within that unobtrusive event handler you can use the this keyword to refer to the element which raised the event and modify it as required. Try this:

<img src="https://svc.opushealth.com/balcoltrasavings/img/Processing.gif" class="img" style="display: none" />
<button type="button" value="<?php echo $id;?>" class="id btn btn-success btn-sm btn-block">
  <span class="fa fa-paper-plane-o"></span> 
  Send To All
</button>

$('button.id').on('click', function() {
  var $btn = $(this).prop("disabled", true);
  var $img = $btn.prev('.img').show(); 

  $.ajax({
    type: "POST",
    url: "test.php",
    data: { id: $btn.val() },
    success: function(msg) {
      console.log("Button Id is " + msg);
      $img.hide();
    }
  });
});

Answer 2

If you are using ajax then (making it as simple as possible).

Add your loading gif image to html and make it hidden (using style in html itself now, you can add it to separate CSS):-

<img src="path\to\loading\gif" id="img" style="display:none"/ >

Show the image when button is clicked and hide it again on success function.

$('#buttonID').click(function(){
  $('#img').show(); //<----show here
  $.ajax({
    ....
   success:function(result){
       $('#img').hide();  //<--- hide again
   }
}

Make sure you hide the image on ajax error callbacks too to make sure the gif hides even if the ajax fails.