Delegate uploadfile event to control dynamically loaded

Question

I am using a fileupload event assigned to #fileupload control. When I put this code in a static page it works well, but I want this control to load in a Javascript template like this:

<script type="text/template" id="propertyCollectionTemplate">
    <span id="firstUpload" class="btn btn-success fileinput-button">
    <i class="glyphicon glyphicon-plus"></i>
    <span>Select files...</span>
    <!-- The file input field used as target for the file upload widget -->
    <input id="fileupload" type="file" name="files[]" multiple>
    </span>    
</script>

this template is loaded when clicking in one table row in my stage

$('table.collection tbody tr').click(function (e) {
        e.preventDefault();
        var m = page.properties.get(this.id);
        page.showDetailDialog(m);

});

In my showDetailDialog function have this code:

showDetailDialog: function (m) {

        // show the modal dialog
        $('#propertyDetailDialog').modal({ show: true });
        // ... fecth all data for my other controls....

This is my upload event bound in static mode:

 $('#fileupload').fileupload({
     url: page.url,
     dataType: 'json',
     done: function (e, data) {
         alert("hola");
         $.each(data.result.files, function (index, file) {
             $('#propertyimage').val("/propertylocator/upload/server/php/files/" + file.name);
         });
         $('#progress .progress-bar').css('width', 0 + '%');
     },
     progressall: function (e, data) {
         var progress = parseInt(data.loaded / data.total * 100, 10);
         $('#progress .progress-bar').css('width', progress + '%');
     }
 }).prop('disabled', !$.support.fileInput).parent().addClass($.support.fileInput ? undefined : 'disabled');

If I copy and paste this event in Chrome console when modal popup is loaded this work well, but I don't know how to delegate this event once I have loaded the template.

You can't use the same `id` multiple times. Use an unique id(or class, but in this case you have to use an id because you only want to submit the open dialog). — GuyT, May 09 '14 at 09:19

score 0 · Answer 1 · edited May 23 '17 at 12:05

There are two ways:

First way:

Initiate fileupload initially (before inserting template) and set the properties on change:

$('#fileupload .files').on('change', ':file', function (e) {
    $('#fileupload').fileupload('add', {
        fileInput: $(this)
    });
});

More details here: https://github.com/blueimp/jQuery-File-Upload/issues/1260

Second way:

Bind fileupload after inserting template in a callback, like:

$('table.collection tbody tr').click(function (e) {

    // your 'click' code
    e.preventDefault();
    var m = page.properties.get(this.id);
    page.showDetailDialog(m);

    // bind fileupload
    $('#fileupload').fileupload({

        // ...

    });

});

More details here: jQuery File Upload not working when file input dynamically created

Delegate uploadfile event to control dynamically loaded

1 Answers1