Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to display delete message in correct table row?
    primarykey
    data
    text
    <p>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.</p> <p>If the upload 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:</p> <pre><code> $(".imagemsg" + counter).html(data); </code></pre> <p>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.</p> <p>Another example is that if I have 4 table rows and I delete the file in the third row, then the message should be displayed in the 3rd row as that is where the deletion has occured.</p> <p>So my question is what do I need to add to <code>$(".imagemsg" + counter).html(data);</code> so that the message is only displayed within the row the deletion of the file occured and not in all <code>.imagemsg</code> which is in every row?</p> <p>Below is full code:</p> <pre><code>function stopImageUpload(success, imagefilename){ var result = ''; var counter = 0; counter++; if (success == 1){ result = '&lt;span class="imagemsg'+counter+'"&gt;The file was uploaded successfully!&lt;/span&gt;&lt;br/&gt;&lt;br/&gt;'; $('.listImage').eq(window.lastUploadImageIndex).append('&lt;div&gt;' + htmlEncode(imagefilename) + '&lt;button type="button" class="deletefileimage" image_file_name="' + imagefilename + '"&gt;Remove&lt;/button&gt;&lt;br/&gt;&lt;hr/&gt;&lt;/div&gt;'); } else { result = '&lt;span class="imageemsg"&gt;There was an error during file upload!&lt;/span&gt;&lt;br/&gt;&lt;br/&gt;'; } $(".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; } </code></pre> <p>BELOW IS HTML CODE:</p> <pre><code> var $fileImage = $("&lt;form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target' onsubmit='return imageClickHandler(this);' class='imageuploadform' &gt;" + "Image File: &lt;input name='fileImage' type='file' class='fileImage' /&gt;&lt;/label&gt;&lt;br/&gt;&lt;br/&gt;&lt;label class='imagelbl'&gt;" + "&lt;input type='submit' name='submitImageBtn' class='sbtnimage' value='Upload' /&gt;&lt;/label&gt;" + "&lt;/p&gt;&lt;p class='listImage' align='left'&gt;&lt;/p&gt;" + "&lt;iframe class='upload_target' name='upload_target' src='#' style='width:0;height:0;border:0px;solid;#fff;'&gt;&lt;/iframe&gt;&lt;/form&gt;"); </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload