使用ajax成功后删除加载图像

Question

我有一些 Ajax 代码，所有代码都可以正常工作，但问题是加载图像不断显示。

我想隐藏成功的图像，也想改变表格列的背景。

我当前的代码：

index.php

    <?php 
include_once("db_connect.php");
?>
<title>phpzag.com : Demo Inline Editing using PHP MySQL and jQuery Ajax</title>
<script type="text/javascript" src="script/jquery-3.1.1.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap-4.0.0-alpha.5-dist/css/bootstrap.min.css"/>
<script type="text/javascript" src="script/functions.js"></script>
<div class="container">
    <h2>Example: Inline Editing using PHP MySQL and jQuery ajax</h2>
    <?php
    $sql = "SELECT id, employee_name, employee_salary, employee_age FROM table_record";
    $resultset = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
    ?>
    <table class="table table-condensed table-hover table-striped bootgrid-table">
        <thead>
          <tr>          
            <th>Employee Name</th>
            <th>Salary</th>
            <th>Age</th>                
          </tr>
        </thead>
        <tbody>
         <?php
         while( $rows = mysqli_fetch_assoc($resultset) ) { 
         ?>
              <tr>                
                  <td contenteditable="true" data-old_value="<?php echo $rows["employee_name"]; ?>" onBlur="saveInlineEdit(this,'employee_name','<?php echo $rows["id"]; ?>')" onClick="highlightEdit(this);"><?php echo $rows["employee_name"]; ?></td>
                  <td contenteditable="true" data-old_value="<?php echo $rows["employee_salary"]; ?>"  onBlur="saveInlineEdit(this,'employee_salary','<?php echo $rows["id"]; ?>')" onClick="highlightEdit(this);"><?php echo $rows["employee_salary"]; ?></td>
                  <td contenteditable="true" data-old_value="<?php echo $rows["employee_age"]; ?>"  onBlur="saveInlineEdit(this,'employee_age','<?php echo $rows["id"]; ?>')" onClick="highlightEdit(this);"><?php echo $rows["employee_age"]; ?></td>
              </tr>
        <?php
        }
        ?>
        </tbody>
    </table>          

    <div style="margin:50px 0px 0px 0px;">
        <a class="btn btn-default read-more" style="background:#3399ff;color:white" href="http://www.phpzag.com/inline-editing-using-php-mysql-and-jquery-ajax" title="Inline Editing using PHP MySQL and jQuery ajax">Back to Tutorial</a>         
    </div>      
</div>

数据库连接

<?php
/* Database connection start */
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "dynamic_test";
$conn = mysqli_connect($servername, $username, $password, $dbname) or die("Connection failed: " . mysqli_connect_error());
if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
}

?>

Mysql 更新查询

<?php
include_once("db_connect.php");
$sql = "UPDATE table_record set " . $_POST["column"] . " = '".$_POST["value"]."' WHERE  id=".$_POST["id"];
mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
exit;  
?>

Ajax 查询

 function highlightEdit(editableObj) {
   $(editableObj).css("background", "#FFF");
 }

 function saveInlineEdit(editableObj, column, id) {
   // No change change made then return false
   if ($(editableObj).attr('data-old_value') === editableObj.innerHTML)
     return false;
   // Send ajax to update value
   $(editableObj).css("background", "#FFF url(loader.gif) no-repeat right");
   $.ajax({
     url: "saveInlineEdit.php",
     type: "POST",
     dataType: "json",
     data: 'column=' + column + '&value=' + editableObj.innerHTML + '&id=' + id,
     success: function(response) {
       // Set updated value as old value
       $(editableObj).attr('data-old_value', editableObj.innerHTML);
       $(editableObj).css("background", "#dcd8d8");
     },
     error: function() {
       console.log("errr");
     }
   });
 }

Answer 1

将 beforeSend 方法用于 ajax，如成功和错误方法。

function highlightEdit(editableObj) {
   $(editableObj).css("background", "#FFF");
 }

 function saveInlineEdit(editableObj, column, id) {
   // No change change made then return false
   if ($(editableObj).attr('data-old_value') === editableObj.innerHTML)
     return false;
   // Send ajax to update value
   //$(editableObj).css("background", "#FFF url(loader.gif) no-repeat right");
   $.ajax({
     url: "saveInlineEdit.php",
     type: "POST",
     dataType: "json",
     data: 'column=' + column + '&value=' + editableObj.innerHTML + '&id=' + id,
     beforeSend : function(res){
        $(editableObj).css("background", "#FFF url(loader.gif) no-repeat right");
     },
     success: function(response) {
       // Set updated value as old value
       $(editableObj).attr('data-old_value', editableObj.innerHTML);
       $(editableObj).css("background", "#dcd8d8");
     },
     error: function() {
       console.log("errr");
     }
   });
 }

Answer 2

正如@Luka Kvavilashvili 所说，您的$(editableObj).css("background","#dcd8d8"); 只会设置background-color，而不会更改其他样式，因此您必须将其更改为：

success: function(response) {
   // Set updated value as old value
   $(editableObj).attr('data-old_value', editableObj.innerHTML);
   $(editableObj).css({"background-image":"none", "background":"#dcd8d8"});
 } 

另一个好的解决方案是利用CSS，做

td { background: #dcd8d8; }
.loading { background: #fff url(loader.gif) no-repeat right; }

并将js 代码更改为类似

$(editableObj).addClass('loading');
$.ajax({
   ...
   success: function(response) {
      // Set updated value as old value
      $(editableObj).attr('data-old_value', editableObj.innerHTML);
      $(editableObj).removeClass('loading');
   }
 ...