How can change event's 'this' object to other function?

Question

I have multiple rows containing file upload control, on onchange event of particular rows fileupload control I'm picking first columns text and sending its value through ajax request.

$(document).on('change','#uploadSupportingDoc',function(){
   console.log("on change called!");
   var questionId = $(this).parent().siblings(":first").text(); // 1st column

   console.log("fileUpload called with Id =>"+questionId);
   uploadFile(questionId,this);

});     

However there is one column( with css class .fileuploadSuccess ) where I want to change icon to show success or failure of uploading.

function uploadFile(questionId,row){
console.log("fileUpload called with Id =>"+questionId);

var isUploaded = false;
$('#uploadSupportingDoc').fileupload({
    url: 'uploadSupportingDoc.html',
    formData: {questionId: questionId },
    acceptFileTypes: /(\.|\/)(jpe?g)$/i,
    maxFileSize: 100,
    dropZone: null,
    pasteZone: null,
    fileInput: $(this),
    dataType: 'json',
    add: function(e, data){

        $(row).closest('tr').children('td.fileuploadSuccess').html('<img src="./img/ajax-loader.gif" alt="Uploading..." />');
        data.submit();
    },
    done: function (e, data){
        var response = data.result.files[0];

        if(!response.isRequestValid)
        {
            window.location = "requestDenied.html";
        }
        else
        {
            if(response.status)
            {
                $(row).closest('tr').children('td.fileuploadSuccess').html("<span class=\"glyphicon glyphicon-ok\" aria-hidden=\"true\"></span>")
            }
            else
            {
                $(row).closest('tr').children('td.fileuploadSuccess').html("<span class=\"glyphicon glyphicon-remove\" aria-hidden=\"true\"></span>")               
            }
        }
    },
    fail: function(e, data){
        console.log("failed");
        console.log(data.jqXHR.responseText);
        console.log(data.jqXHR+"\m");
    },
    always: function (e, data){

    }
 });


}

I've tried sending it this way,

uploadFile(questionId,this);

and tried to access it like this,

$(row).closest('tr').children('td.fileuploadSuccess').html("<span class=\"glyphicon glyphicon-ok\" aria-hidden=\"true\"></span>");

Howerer this is not working and everytime it is changing the value of first rows column. why is it happening? any solution for this kind of requirement?

Answer 1

Actually, you don't need to pass row there. Pass the element for which you want to update html:

$(document).on('change','#uploadSupportingDoc',function(){
   console.log("on change called!");
   var questionId = $(this).parent().siblings(":first").text(); // 1st column
   console.log("fileUpload called with Id =>"+questionId);

   var cell = $(this).parent().siblings('.fileuploadSuccess');
   uploadFile(questionId, cell);

});

Change function uploadFile(questionId,row){ to function uploadFile(questionId,cell){

You can then simplify: $(row).closest('tr').children('td.fileuploadSuccess').html(..);

to cell.html(...);