Question

I have a table where each row contains some data (data-id) and a <div class = "upload">Upload</div>. The uploader needs to be passed an object which contains uploader_obj.button set as the initiating <div>, any parameters such as data-id to be sent to the server, and a bunch of other stuff which I didn’t show.

The following script loops over the table, modifies the object to set button and params.id, and creates the uploader on each row.

While a separate upload button is created on each row, they each reference the same params.id which is set to the last row’s value (i.e. 222). I need each to be set to the value of their specific row.

One way to fix it is to have each uploader have it’s own upload_obj, but this seems like a waste of memory.

Instead, I tried to reference data-id within the uploader_obj. I can do so within onSubmit, however, haven’t figured out how to use this value to set param.id. I’ve tried to set it within param by doing something like params: {'id':$(this.button).parent().parent().data('id')} but this is my document, and not the uploader.

So… Without making a separate uploader_obj for each row, how could I make each row’s uploader sent its own param.id to the server? Thank you

PS. Sorry for the weak title. I really tried to think of a better one but couldn’t.

<table>
    <tr data-id="123"><td>Hello</td><td><div class="upload">Upload</div></td></tr>
    <tr data-id="321"><td>Hello</td><td><div class="upload">Upload</div></td></tr>
    <tr data-id="222"><td>Hello</td><td><div class="upload">Upload</div></td></tr>
</table>

var uploader_obj = {
  button:null,
  params: {'id':null},
  onSubmit: function(id, fileName) {
     var id=$(this.button).parent().parent().data('id')
     console.log(id);
  },
  otherStuff: whatever
};


$('#myTable div.upload').each(function(i,v){
    uploader_obj.button=this;
    uploader_obj.params.id=$(this).parent().parent().data('id');
    new qq.FileUploaderBasic(uploader_obj);
});

Answer 1

You’re passing the same object in every iteration, just create the object from the values you have inside the loop instead:

$('#myTable div.upload').each(function(i,ele){
    new qq.FileUploaderBasic({
        button: ele,
        params: {
            id: $(ele).closest('tr').data('id')
        },
        onSubmit: function(id, fileName) {
            var id=$(this).closest('tr').data('id')
        },
        otherStuff: whatever
    });
});