I have a list of images, each with different id. When user clicks on the specific <img> follows by "Delete" button, I want to remove the that <img>and also remove the image file from the server. I have the following ajax call which will achieve this purpose.

$(document).ready(function () {

    $("img").click(function () {
        var img_id = $(this).attr("id");
        var imagefile = img_id;
        img_id = "#" + img_id;

        $("button").click(function () {          // delete button
            $("#image " + img_id).remove();
            $("button").unbind();

            $.ajax({
                type: "POST",
                url: "deleteimage.php",
                data: imagefile,                        
                success: function(response) {
                // do something
                }
        }); 
    });
});

I need to know the image id before I can delete the file. So I pass this into a variable then send it over to the following php file.

<?php
    include('config.php');

    if(isset($_POST['imagefile']))
    {
        $imagefile = $_POST['imagefile'];
        $imagepath = "Users/mp4_thumbnails-".$imagefile.".jpg"; 

        unlink($imagepath);
    }
?>

Sadly this is not working. This is my first try on ajax call. Any inputs will be greatly appreciated.

I have a list of images, each with different id. When user clicks on the specific <img> follows by "Delete" button, I want to remove the that <img>and also remove the image file from the server. I have the following ajax call which will achieve this purpose.

$(document).ready(function () {

    $("img").click(function () {
        var img_id = $(this).attr("id");
        var imagefile = img_id;
        img_id = "#" + img_id;

        $("button").click(function () {          // delete button
            $("#image " + img_id).remove();
            $("button").unbind();

            $.ajax({
                type: "POST",
                url: "deleteimage.php",
                data: imagefile,                        
                success: function(response) {
                // do something
                }
        }); 
    });
});

I need to know the image id before I can delete the file. So I pass this into a variable then send it over to the following php file.

<?php
    include('config.php');

    if(isset($_POST['imagefile']))
    {
        $imagefile = $_POST['imagefile'];
        $imagepath = "Users/mp4_thumbnails-".$imagefile.".jpg"; 

        unlink($imagepath);
    }
?>

Sadly this is not working. This is my first try on ajax call. Any inputs will be greatly appreciated.

• javascript
• php
• jquery
• ajax

• @SCC can you confirm if the Ajax call is succeding by writing a log entry in the very begining of the PHP script? I want to make sure if the Ajax call is succeding. If it succeeds then we can inspect just the PHP script otherwise we have question the java script itself. – Siva Senthil Commented Mar 20, 2014 at 12:07
• Did you check if you are getting any Javascript errors? – Lepanto Commented Mar 20, 2014 at 12:14

4 Answers 4

Try with this

$.ajax({
                type: "POST",
                url: "deleteimage.php",
                data: {"imagefile":imagefile},                        
                success: function(response) {
                // do something
                }
        }); 

        $.ajax({
            type: "POST",
            url: "deleteimage.php",
            data: {imagefile: imagefile}, // here                      
            success: function(response) {
            // do something
            }
        });

Change

     data: imagefile,

To

     data: {imagefile, imagefile },

$.ajax({
    type: "POST",
    url: "deleteimage.php",
    data: "imagefile=" + imagefile,                        
    success: function(response) {
        // do something
    }
});