How to display delete message in correct row

Below is a function where it controls whatever happens after a file has finished uploading in its own table row. Each table row consists of a file input where the user can upload a file and then the name of the file is appended within it's own table row.

If the file was successful then it displays a successful message, if upload was not successful then it displays a message stating there is an error. But I also have another function within the function where the user can delete a file by clicking on the "Delete" button. The only problem I have is with this line of code:

$(".imagemsg").html(data);

Let's say that I have 2 table rows, and I delete a file in the first row, the message within .imagemsg should only be displayed in the first row as that was the row the deletion occured, it shouldn't display the message in the first and second row.

So my question is what do I need to add to $(".imagemsg").html(data); so that the message is only displayed within the row the deletion of the file occured and not in all .imagemsg which is in every row?

Below is full code:

function stopImageUpload(success, imagefilename){

      var result = '';

      if (success == 1){
         result = '<span class="imagemsg">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');

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

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


    });

      return true;   
}

CALL BACK FUNCTION:

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

I heard that it is best if this will be done but I don't know how to code this:

Pass the relevant element to the callback function. You already have $(this), so you can probably get the right row from that and put it in a variable, then access it in the callback to put the result in the right place.

UPDATE:

function stopImageUpload(success, imagefilename){

      var result = '';
      var counter = 0;
      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;   
}

Answers


A quick way is to add a counter, and then .imagemsg is becomes ".imagemsg".$counter, then a msg returned actually only goes to relevant line - untested code but you get the idea.

eg

$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'); 

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

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

If you have more than one row with class imagemsg, your code

$(".imagemsg").html(data);

will load it in all of them

To index your way in, you can try

$(".imagemsg").eq(0).html(data);

for the first one

DEMO

Alternatively change class="imagemsg" to id="imagemsgN" where N is incremented and unique for each row. Then you change to $("#imagemsg"+counter) to get to it


Need Your Help

A Floating point expression whose value is 1 shows 0 when converted to int. How to get rid of this isuue in C++?

c++ static-cast

I need to change an expression's type from floating point to integer so as to add it to another integer variable.

Android onConfigurationChanged is not being called

android events onconfigurationchanged

I know this question was asked before, but the answer didn't work for me.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.