Question

I’m using the jQuery plugin Uploadify to upload videos to my server. As soon as the page loads, it finds all file input elements with a particular class name and calls a function which instantiates the Uploadify function:

$(document).ready(function(){
   $(".video_upload").each(function(){
       var t = $(this);
       var f = $("#"+i).siblings(".show_file");
       f.hide();
       setupUpload(t,f);
   });
});
function setupUpload(t,f){
    t.uploadify({
        'uploader'      : '<?=site_url('../assets/js/uploadify/uploadify.swf');?>',
        'script'        : '<?=site_url('utility/send_vid');?>',
        'cancelImg'     : '<?=site_url('../assets/js/uploadify/cancel.png');?>',
        'folder'        : '/uploads/',
        'auto'          : true,
        'onComplete'    : function(event, ID, fileObj, response, data) {
            var r = $.parseJSON(response);
            if(r.error){
                $("#"+i).siblings(".error").html(r.reason).show();
            }else{
                $("#"+i).siblings("#video_href").val(r.src);
                setTimeout(function(){
                    f.children('.file_name').text(r.nice_name);
                    f.show();
                },1000);
            }
        }
    });
}

This all works perfectly. What I want to do now is insert a new file input element into the page when a user clicks a particular button. So they click the button, insert a new file input element, which needs to be grabbed by Uploadify and converted like the other inputs.

After the new element is inserted, I try and call the setupUpload() function, but it doesn’t work. Will this kind of function only work when the page loads, or can it be called whenever?

EDIT:

For the time being, I’m calling the setupUpload() function with the following parameters:

    var t = $("#ind_video_2");
    var f = t.siblings(".show_file");
    setupUpload(t,f);

The ID is the new element’s ID, but I’m just using it as a temporary selector until I know the whole thing works and will use something more dynamic…

Answer 1

To get this working, you need to wrap everything in one function which is called on page load and whenever you need it in the future. So something like:

function setupUpload(){
    $(".video_upload").each(function(){
        var t = $(this);
        if(t.siblings('.uploadifyQueue').length==0){
            var f = t.siblings(".show_file");
            t.uploadify({
                'uploader'      : '<?=site_url('../assets/js/uploadify/uploadify.swf');?>',
                'script'        : '<?=site_url('utility/send_vid');?>',
                'cancelImg'     : '<?=site_url('../assets/js/uploadify/cancel.png');?>',
                'folder'        : '/uploads/',
                'auto'          : true,
                'onComplete'    : function(event, ID, fileObj, response, data) {
                    var r = $.parseJSON(response);
                    if(r.error){
                        t.siblings(".error").html(r.reason).show();
                    }else{
                        t.siblings("#video_href").val(r.src);
                        setTimeout(function(){
                            f.children('.file_name').text(r.nice_name);
                            f.show();
                        },1000);
                    }
                }
            });
        }
    });
}

All you have to do is call this when the jQuery is ready or when a user clicks a button to insert new DOM elements.