Referencing DOM within object

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); });

adeneo · Accepted Answer · 2012-12-15 14:35:53Z

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 }); });

answered Dec 15, 2012 at 14:35

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1032531 Over a year ago

Yes, I think this is probably what I will need to do. The object passed to FireUploaderBasic is bigger than I showed, and I hoped there was a way they can be passed the same object.

adeneo Over a year ago

If you want different values, you'll need different objects, or at least rewrite all the values in the object which in your case looks like it's more work than just creating a new one on every iteration.

chsymann · Accepted Answer · 2012-12-15 14:36:28Z

1

I think the problem is that you never create a new object of "uploader_obj". So on every loop-iteration you are overwriting the values of your object.

edit:

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

edited Dec 15, 2012 at 14:36

answered Dec 15, 2012 at 14:29

chsymann

1,6801 gold badge15 silver badges15 bronze badges

3 Comments

user1032531 Over a year ago

Agree. So is creating a new object for each row the only solution?

user1032531 Over a year ago

And how would I create a new object for each row? I tried new qq.FileUploaderBasic($(uploader_obj).clone()); with no success.

user1032531 Over a year ago

I see you changed the name to an array (or is it an object?) Regardless, I see why you are doing it. Thanks

Sudhanshu Yadav · Accepted Answer · 2012-12-15 14:36:36Z

Instead of making uploader object as a global variable, if you make it local varaible to qq.FileUploaderBasic function and send button_object and data_id as a parameter, may be it will work. you can try like

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

and keep your object inside your function.

This would require modifying qq.FileUploaderBasic more than I wish to do.

Collectives™ on Stack Overflow

Referencing DOM within object

3 Answers 3

2 Comments

3 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

1 Comment

Related