CODEWITHSUNDEEP
javascriptphpjqueryajax
Obmerk Kronen
Obmerk Kronen

Reputation: 15969

Extention of file being dropped during AJAX call

I have this script , trying to delete an image with AJAX call.

PHP

 foreach ( $in_folder as $img => $v ) {

    echo '
        <span class="imageHolder">
         <a onclick="DeleteImage('.$img.'); return false;" href="javascript:;">X</a>
         <img src="uploads/' . $img .'"/>
            <span class="uploaded">
            </span>
        </span>';
    // print_r($in_folder);
    }

The JS : 

 function DeleteImage(img){

        $.ajax({
            url: 'delete.php',
            type: "POST",
            data: img,
            success: function(datos){
                console.log("check");
            }
        });
    }

delete.php 

 if($_GET["action"]=="deleteimage")
    {
        $imagefile = $POST['img'];
        $img_path = 'uploads/' . $img;
        unlink ( $img_path ); 
    }

The problem is the JS part , I am getting an error :

Error: ReferenceError: IMAGE_NAME is not defined
Source File: http://localhost/dev/_upload_test/
Line: 1

However ,the PHP $img variable is outputting IMAGE_NAME.jpg

<a href="javascript:;" onclick="DeleteImage(IMAGE_NAME.jpg); return false;">X</a>

Shouldn´t that error be 

Error: ReferenceError: IMAGE_NAME.jpg is not defined

( where is the extention ?? )

Obviously my extention .jpg is being cut off by the ajax process , But since my JS skills are <= 0 , I am having trouble understanding what is getting wrong in the process ..

Upvotes: 2

Views: 71

Answers (2)

Pranav C Balan
Pranav C Balan

Reputation: 115242

You need to change

data: img,

to

data: { img:img },

or use 

data: "img="+img,

Also you need to wrap string using ' or " . 

<a href="javascript:;" onclick="DeleteImage('IMAGE_NAME.jpg'); return false;">X</a>
<!--                                      --^--          --^--                  -->

Change your php code to like this,

foreach ( $in_folder as $img => $v ) {
echo '
        <span class="imageHolder">
         <a onclick="DeleteImage(\''.$img.'\'); return false;" href="javascript:;">X</a>
         <img src="uploads/' . $img .'"/>
            <span class="uploaded">
            </span>
        </span>';
    // print_r($in_folder);
    }
?>

Upvotes: 3

Joucke Hempenius
Joucke Hempenius

Reputation: 41

Reason for your reference error "IMAGE_NAME is not defined" would be that in the following line, there are no quotes around the file name.

<a href="javascript:;" onclick="DeleteImage(IMAGE_NAME.jpg); return false;">X</a>

Javascript then expects your IMAGE_NAME to be an object, and tries to call the jpg property of the undefined object. That's where your ".jpg" 'disappears'.

The php code would then be:

foreach ( $in_folder as $img => $v ) {
    echo '
        <span class="imageHolder">
         <a onclick="DeleteImage('."'".$img."'".'); return false;" href="javascript:;">X</a>
         <img src="uploads/' . $img .'"/>
            <span class="uploaded">
            </span>
        </span>';
    // print_r($in_folder);
}

Note the "'" (double quote, single quote, double quote) I've added around $img inside the DeleteImage function.

Hope this helps you!

Edit: This changes the delete link to:

<a href="javascript:;" onclick="DeleteImage('IMAGE_NAME.jpg'); return false;">X</a>

Upvotes: 1

Related Questions