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

成功と誤差法のようなAJAX用beforeSend方法を使用します。

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'); 
    } 
...