Question

I am using the jQuery-File-Upload widget (although I believe this question can generalize to any jQuery widget). The API instructs the user to initialize the the widget using the fileupload method, thus:

$('#fileupload').fileupload();

My question is: Without knowing IDs, how can I find #fileupload (and any other elements which have had .fileupload() called upon them?

Answer 1

jQuery File Upload uses the jQuery UI widget factory under the hood, and that factory is known to register the widgets instances with the elements they extend using data().

Therefore, you can use filter() and write something like:

// Restrict ancestor if you can, $("*") is expensive.
var uploadified = $("#yourAncestor *").filter(function() {
    return $(this).data("fileupload");
});

Update: From jQuery UI 1.9 onwards, the data() key becomes the widget’s fully qualified name, with dots replaced by dashes. Therefore, the code above becomes:

var uploadified = $("#yourAncestor *").filter(function() {
    return $(this).data("blueimp-fileupload");
});

Using the unqualified name is still supported in 1.9 but is deprecated, and support will be dropped in 1.10.