Question

Below is the code where it is displaying the delete message ‘$(".imagemsg" + counter).html(data);‘. But it is displaying the delete message after a file has been deleted in the second row only, this is incorrect, it should only be displayed in the row the file was deleted from.

For example, if the file was deleted from the 3rd row, the message should be displayed in the 3rd row, if file was deleted from 6th row, it should display delete message in 6th row and etc. But at the moment no matter which row the file is deleted from, only the second row displays the delete message.

   var counter = 0;

function stopImageUpload(success, imagefilename){

      var result = '';
      counter++;

      if (success == 1){
         result = '<span class="imagemsg'+counter+'">The file was uploaded successfully!</span><br/><br/>';      
         $('.listImage').eq(window.lastUploadImageIndex).append('<div>' + htmlEncode(imagefilename) + '<button type="button" class="deletefileimage" image_file_name="' + imagefilename + '">Remove</button><br/><hr/></div>'); 
      }
      else {
         result = '<span class="imageemsg">There was an error during file upload!</span><br/><br/>';
      }


      $(".deletefileimage").on("click", function(event) {

         var image_file_name = $(this).attr('image_file_name');

    jQuery.ajax("deleteimage.php?imagefilename=" + image_file_name)
      .done(function(data) {
        $(".imagemsg" + counter).html(data);
       });

       $(this).parent().remove();

    });

      return true;   
}

The result variable is called here in the imageupload.php:

CALLBACK:

  <script language="javascript" type="text/javascript">window.top.stopImageUpload(<?php echo $result ? 'true' : 'false'; ?>, '<?php echo $_FILES['fileImage']['name'] ?>');</script>

Answer 1

This approach is not ideal overall. A better approach would probably be to give them all the same class and then use things like parent, find, children etc. to find the appropriate elements.

However, without massively overhauling your code, i thin this should fix it:

var _counter = counter;

$('.listImage').eq(window.lastUploadImageIndex).find(".deletefileimage").on("click", function(event) {
    var image_file_name = $(this).attr('image_file_name');

    jQuery.ajax("deleteimage.php?imagefilename=" + image_file_name)
        .done(function(data) {

        $(".imagemsg" + _counter).html(data);
    });

    $(this).parent().remove();
});

Basically the click handler is only attached to the appropriate button and the appropriate counter value is used.