通过Ajax删除图像

Very recently I have started programming and I'm currently running into an issue to which I hope you can help:

• Ajax executes the upload.php page which succesfully deletes the file from the server and from the MySQL table
• The Ajax result however is an error message and the image is not removed from Page.php unless reloaded.

Page.php

    <div class="row no-collapse 50% uniform">
    <?php
    while($row = mysqli_fetch_array($SubEntries_SQL)) {
        $fileURL = "upload/" . $_SESSION['adminID'] . "/" . $row['filename'];
        $fileId = $row['id'];
        $fileName = $row['filename'];
        if (!file_exists($fileURL)) {  $fileURL = $sub_entryThumbURL = "../../images/no_img.png"; }

    ?>                          

        <div class="2u" id="success">                   
            <span class="image fit 50%">
                <a href="javascript:void(0)" onclick="RemoveItem('<?=$fileId;?>','<?=$fileName;?>')">
                    <img src="<?=$fileURL;?>" border="0" class="thumb" />
                </a>
            </span>
        </div>

    <?php
    }   
    ?>
    </div

Ajax function

    function RemoveItem(itemId,ItemName) {
        $.ajax({
            'url': 'content/upload.php', 
            'type': 'POST',
            'data': {itemId: itemId, name: ItemName, request: 2}, 
            'success': function(data) {
                 if (data == 1) {
                    $(".success").fadeIn(500).delay(2000).fadeOut(500);
                }
            },
            'error': function () {
                alert("error");
            }
          });
        }

There is a confusion inside the while, here's my suggestion:

1. Where you have replace the id="success" for a unique id and common class

Assuming your $fileId is unique among all nodes

<div class="2u delete_success" id="#delete_<?php echo $fileId; ?>">

By doing this you'll get distinct nodes, next step would be to make your javascript to know which node to delete after completion.

The ajax function would be something like.

function RemoveItem(itemId,ItemName) {
    $.ajax({
        'url': 'content/upload.php', 
        'type': 'POST',
        'data': {itemId: itemId, name: ItemName, request: 2}, 
        'success': function(data) {
             if (data == 1) {
                $("#delete_"+itemId).fadeIn(500).delay(2000).fadeOut(500);
            }
        },
        'error': function () {
            alert("error");
        }
    });
}

Changed the line: $("#delete_"+itemId).fadeIn(500).delay(2000).fadeOut(500);

This should do the work.

Thank you so much for pointing me in the right direction! Final code that I used to get the desired result:

/* jQuery */

function RemoveItem(itemId,ItemName) {
$.ajax({
    'url': 'content/upload.php', 
    'type': 'POST',
    'data': {itemId: itemId, name: ItemName, request: 2}, 
    'success': function(data) {
        $("#delete_"+itemId).html( data );
        /*$("#delete_"+itemId).fadeIn(500).delay(2000).fadeOut(500);*/
    },
    'error': function () {
        alert("error");
    }
});

/* Html */

<?php
    while($row = mysqli_fetch_array($SubEntries_SQL)) {
    $fileURL = "upload/" . $_SESSION['adminID'] . "/" . $row['filename'];
    $fileId = $row['id'];
    $fileName = $row['filename'];
    if (!file_exists($fileURL)) {  $fileURL = "../../images/no_img.png"; }

?>                          
    <div class="2u" id="delete_<?php echo $fileId; ?>">     
        <span class="image fit 50%">
            <a href="javascript:void(0)" onclick="RemoveItem('<?=$fileId;?>','<?=$fileName;?>')">
                <img src="<?=$fileURL;?>" border="0" class="thumb_step1" />
            </a>
        </span>
    </div>

<?php
}   
?>

/* upload.php */

$targetDir = "upload/";

if($request == 2){
    $filename = $targetDir.$_POST['name']; 
    mysqli_query($link, "DELETE FROM $upload_db WHERE filename = '".$_POST['name']."'");
    unlink($filename);
}