jQuery file upload after page load

Question

I have a page that loads an HTML form via a $.ajax request.

The form has a file upload option. I have tried several Ajax upload plugins and they all require me to instantiate some ajaxUpload() type object which internally creates the click listener. However these listeners dont trigger because the dynamically loaded form is not DOM accessible.

To get around such things in the past I have used live() to listen. But I cant declare these ajaxUpload instances as a live event. So how can I get this upload button to function?

Answer 1

I seem to recall, from somewhere, that the livequery plugin can handle this type of thing. In my quest for the truth, I came across this:

http://stackoverflow.com/questions/1515734/issue-with-binding-in-jquery-for-copied-elements

Answer 2

Could you add the dynamically loaded form to the document? (then instantiate the ajaxUpload object ''after'' the form is added to the document)

Answer 3

AJAX cannot upload file. jQuery form plugins using hidden iframe technique to upload the file. To do real AJAX upload, you can use Flash based uploader. I recomended you to try uploadify.

Answer 4

Here is the best I have been able to do so far:

$('#uploadButton').live('click', function(){                
    new AjaxUpload('uploadButton', {
       action: 'upload-handler.php',
       onComplete: function(file, response){
        alert(response);
       });
});

live() works, but it only instantiates the object after the click. So I need to click it again in order for the upload trigger to work.

So I have been trying to remove the extra click somehow. I was hoping the following would work at the end of the function, but it has not:

$(this).trigger("click");

Answer 5

What do you mean the form is not accessible in the DOM once you fetch it with ajax? Why shouldn't it be?

$.get(url_that_has_form, null, function(resp) {
    $('#some_container').html(resp);
    // Now the form is part of the document.
    // Run your ajax upload stuff here.
    new AjaxUpload('#id_of_form_you_just_added', options);
}, 'html');