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?

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

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:

Issue with binding in jQuery for copied elements

edited May 23 '17 at 12:19

Community

1
1

answered Feb 01 '10 at 21:44

karim79

339,989
67
413
406

livequery does not work in jquery 1.4 which I need. thanks though. I am experimenting with live() now. – Jono Feb 02 '10 at 16:45

score 1 · Answer 2 · answered Feb 02 '10 at 01:52

1

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.

answered Feb 02 '10 at 01:52

Donny Kurnia

5,260
5
35
52

AJAX can upload in an iframe which is fine for my purposes. I have tried uploadify and swfupload and they always give me problems. And I would rather not deal with flash anyway. – Jono Feb 02 '10 at 14:19
Flash is not technically AJAX (or AJAJ) either. All the newest browsers, except IE, do support file upload with XHR. Malsup's jQuery form plugin uses XHR to send the file on newer browsers, and degrades to the iframe trick in older broswers and IE. I haven't used other solutions, but malsup's plugin is working great for me thus far! – wprl May 07 '12 at 23:09

score 1 · Answer 3 · answered Feb 03 '10 at 07:21

1

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');

answered Feb 03 '10 at 07:21

Lawrence

10,142
5
39
51

This will not work. Loading HTML does not add it to the DOM in jQuery. This is the purpose of live(). – Jono Feb 03 '10 at 16:42
You're just wrong about this. Loading HTML does not *automatically* add it to the DOM; that's why I'm *explicitly* adding it with the .html() call. You could also use append() or any of the other related methods. The purpose of live() is so you can set up event handlers *before* fetching. – Lawrence Feb 03 '10 at 19:18

score 0 · Answer 4 · answered Feb 01 '10 at 22:16

0

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

answered Feb 01 '10 at 22:16

orip

73,323
21
116
148

I am doing exactly that and it does not work. This is because when I add the form, it does not attach to the DOM. So even if I declare the object after it is loaded, it cannot parse that section of the DOM. – Jono Feb 02 '10 at 14:17

score 0 · Answer 5 · answered Feb 02 '10 at 16:49

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");

See my answer. Why not do the above not in a click handler, but in the callback after the ajax request for the form completes? — Lawrence, Feb 03 '10 at 07:22

score 0 · Accepted Answer · answered Feb 08 '11 at 18:14

I have solved this by using a different uploader plugin https://github.com/valums/file-uploader

which allows me to call a function to create an uploader from a DOM element at any desired time. So I can call the function only when I need an uploader. That way I dont need to rely on live events.

score 0 · Answer 7 · answered Apr 07 '11 at 14:11

@lawrence thanks,i was facing same issue, after loading html as a form part, congaing upload elements, i have to click twice. Although i tried many methods to rebind the click handle after loading html but failed.

At the end of page i read this $(this).trigger("click"); and i change it to suit me and place at the end of ajax call, and it works. jQuery("#upload").trigger("click"); Hurrah... Thanks every body.

jQuery file upload after page load

7 Answers7