How to apply html and css to a selected row in table using jquery?

Question

In my MVC 3 application, my problem is, I have a table with rows generated by the number of records returned to the view. These rows have a checkbox and an upload btn feature if the record does not contain a file. The idea being, that if there is no file associated with the record "No Cert" is displayed under the Cert column. Only when the checkbox is checked will this cell display a "upload file" btn. Once this btn is clicked and window is opened to select a file File is selected, a pop-up message appears notifying the user that the file was successfully uploaded. However the cell under Cert for that selected row will now be blank. Only with a page refresh will the file name appear.

I did try to add a div with an associated class to display "Uploaded" and it worked for the first one. But when I repeat the process on another selected row , the "uploaded" div is applied to the first row again and the cell in the row I just selected is left blank. I believe this is because the code is using the td with the first ID "attBtn" used in the onComplete function below.

                      onComplete: function (id, fileName, responseJson) {
                    var resultMessage = document.getElementById('resultMessage');
                    alert(responseJson.msg);
                    $('.qq-uploader').remove();
                    $('#attBtn').prepend('<div class="uploadedTag"><p>Uploaded</p></div>');

Section of the table dealing with the upload feature:

      @if (Model.ElementAt(index).CertName != null)
             {
                 <td>@Html.DisplayFor(m => Model.ElementAt(index).CertName)</td>
             }
             else
             {                    
                <td id ="attBtn" class="file-uploader-attachment-Class"></td>
             }

Script used in view:

   <script type="text/javascript">
$(document).ready(function () {

    function handleCheckbox() {
        if ($(this).find(':checkbox').is(':checked')) {
            createUploader($(this));

            $(this).find('.file-uploader-attachment-Class').removeClass("upload-placeholder-unchecked");
        }
        else {
            $(this).find('.file-uploader-attachment-Class').addClass("upload-placeholder-unchecked");
            $(this).find('.file-uploader-attachment-Class').html($('#myHTML2').html());
        }
    }

    $('tr').each(handleCheckbox);
    $('tr').on('click', handleCheckbox);


    function createUploader(container) {

        var elements = container.find('.file-uploader-attachment-Class');

        var CAL_ID = container.find(':checkbox').val()

        Array.prototype.filter.call(elements, function (element) {

            var uploader = new qq.FileUploader({
                element: element,
                sizeLimit: 2147483647, // max size
                action: '/CalibrationViewer/AttachmentUpload',
                allowedExtensions: ['xls', 'xlsx', 'pdf', 'doc', 'docx', 'csv', 'txt', 'rtf', 'zip', 'zipx', '7z'],
                params: {
                    customer: CUST_NAME,
                    calibrationId: CAL_ID
                },
                multiple: false,
                debug: false,

                onComplete: function (id, fileName, responseJson) {
                    var resultMessage = document.getElementById('resultMessage');
                    alert(responseJson.msg);
                    $('.qq-uploader').remove();
                    $('#attBtn').prepend('<div class="uploadedTag"><p>Uploaded</p></div>');

                }

            });

        });
    }
});

How do identify the current row I'm working with. ? It would be great if I could get the name of the File name just inserted into the cell instead of the "uploadded"

Answer 1

I'm not going to try to figure out your specific element classes but simply point out a general approach that is a very common pattern for isolating instances in repeated blocks of html.

Since you are using table , row will be a <tr>

$('.someButtonClass').click(function(){

   /* "this" is the instance of the elements 
       represented by selector that event triggered on
    */
    var $row = $(this).closest('tr'); /* isolate row instance*/

    /* now look within row instance to manipulate descendant elements  */

    $row.find('.someOtherClass').doSomething();
});