Call function attribute from outside function in jQuery

Question

I am trying to call input attribute value from child function.

Code is Here:

     $("input.ups").fileinput({
         uploadUrl: "/imalatci/products/uploadimages",
         allowedFileExtensions: ["jpeg","jpg", "png", "gif"],
         maxImageWidth: 500,
         maxImageHeight: 400,
         maxFileCount: 5,
         resizeImage: true,
         language:"tr",
         uploadExtraData: function() {
             return {
                 product_id: $(this).attr('product_id')
             };
         }
     }).on('filepreupload', function() {
         $('#kv-success-box').html('');
     }).on('fileuploaded', function(event, data) {
         $('#kv-success-box').append(data.response.link);
         $('#kv-success-modal').modal('show');
     });

I want to get $("input.ups") product_id attribute in this function:

uploadExtraData: function() {
                 return {
                     product_id: $(this).attr('product_id')
                 };
             }

But it is getting undefined error?

How can we fix this ?

Inside the uploadExtraData the this reference will not be the element which raised the event. You should declare a variable with the data you require in the outer scope to use within that handler. You haven't shown a full example of your code, so I can't tell you exactly how to do this. — Rory McCrossan
– Rory McCrossan, Commented Oct 28, 2015 at 8:46

Rory McCrossan · Accepted Answer · 2015-10-28 08:58:31Z

1

The scope of this within the uploadExtraData function is not the input.ups element which the plugin is being instantiated on. To achieve what you require you would need to loop over them individually so you can get a reference to the element. Try this:

$("input.ups").each(function() {
    var $input = $(this);
    $input.fileinput({
        uploadUrl: "/imalatci/products/uploadimages",
        allowedFileExtensions: ["jpeg","jpg", "png", "gif"],
        maxImageWidth: 500,
        maxImageHeight: 400,
        maxFileCount: 5,
        resizeImage: true,
        language:"tr",
        uploadExtraData: function() {
            return { product_id: $input.attr('product_id') };
        } 
    }).on('filepreupload', function() {
        $('#kv-success-box').html('');
    }).on('fileuploaded', function(event, data) {
        $('#kv-success-box').append(data.response.link);
        $('#kv-success-modal').modal('show');
    });
});

I would also suggest using a data-* attribute instead of a non-standard attribute like product_id.

answered Oct 28, 2015 at 8:58

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

2 Comments

badman Over a year ago

Thanks a lot. You saved my day

Rory McCrossan Over a year ago

No problem, glad to help.

Collectives™ on Stack Overflow

Call function attribute from outside function in jQuery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related