Select dynamic HTML Element via jQuery

Question

I am building an ASP.NET MVC application and I am using the jQuery Blueimp plugin on a PartialView that is added dynamically to the page.

According to the Docs of the plugin I need to do this:

$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
            });
        }
    });
});

But this of course will not work in my case, because my PartialView does not exist on the page at first.

So my question is, how can I grab the dynamically added file input, and initialize .fileupload on it. I have tried the following as suggested by Archer, but it isn't working:

$(function () {
    $('#campaign-form-wrap').on("change", "#fileUpload", function () {
        $('#fileUpload').fileupload({
            dataType: "json",
            url: "/ZenosIntranet/Campaign/ConvertExcelToVehicleDriverSummariesJson",
            limitConcurrentUploads: 1,
            sequentialUploads: true,
            maxChunkSize: 10000,
            done: function (e, data) {
                $.each(data.results, function() {
                    alert("boo");
                });
            }
        });
    });
});

I also ensured I have the correct ordering of the scripts as suggested on answers on this question. But still no go. I am getting the following error now:

Uncaught TypeError: Object [object Object] has no method 'fileupload'

UPDATE: I think the syntax above is incorrect, because even when I do this.siblings() in Chrome's console, I get the error:

TypeError: Object # has no method 'siblings'

Which suggests to me that the code thinks my this object has a method called siblings or fileupload - but do they? I know in the case of fileupload I am wanting to attach it to that control.

I would change submit to change on the file upload function. submit does feel kinda out of place. — display-name-is-missing
– display-name-is-missing, Commented Feb 12, 2014 at 15:45
Thanks, but wouldn't change fire on me simply clicking the button to upload the file too? — J86
– J86, Commented Feb 12, 2014 at 15:48
Also, about the not defined issue - could you not define the function like function file_upload() { fileupload({ ...., and then call the function with: $('#campaign-form-wrap').on("change", "#fileUpload", file_upload);? — display-name-is-missing
– display-name-is-missing, Commented Feb 12, 2014 at 15:49
No, change would fire the function when the value in the field change (if you add/change the file placed there). — display-name-is-missing
– display-name-is-missing, Commented Feb 12, 2014 at 15:49
Thanks, tried what you suggested, I get same error again. fileupload not defined. — J86
– J86, Commented Feb 12, 2014 at 15:55

Reinstate Monica Cellio · Accepted Answer · 2014-02-12 17:33:07Z

1

Your event handler is actually trying to run the function immediately. You need to wrap it in an anonymous function so it is only called when the event occurs...

$(function () {
    $('#campaign-form-wrap').on("submit", "#fileUpload", function() {
        $(this).fileupload({
            dataType: "json",
            url: "/ZenosIntranet/Campaign/ConvertExcelToVehicleDriverSummariesJson",
            limitConcurrentUploads: 1,
            sequentialUploads: true,
            maxChunkSize: 10000,
            done: function(e, data) {
                $.each(data.results, function() {
                    alert("boo");
                });
            }
        });
    });
});

edited Feb 12, 2014 at 17:33

answered Feb 12, 2014 at 15:59

Reinstate Monica Cellio

26.2k6 gold badges54 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

J86 Over a year ago

Looks good, but still getting the same error :( I put an alert() before the .fileupload() and that fired fine, so I know the function is attempting to run, but I get the same fileupload undefined error :(

Reinstate Monica Cellio Over a year ago

I'll have a look at the blueimp documentation and see if I can find something.

Reinstate Monica Cellio Over a year ago

It's actually sounding like a possible conflict issue. The above change is still required, as you were previously running the function immediately, but have a look here and see if this helps... stackoverflow.com/questions/10079670/…

J86 Over a year ago

Updated Q. I ensured the order was correct too, but still error as detailed in updated Q. Thanks

Reinstate Monica Cellio Over a year ago

Can you show us the rendered html (from a "view source") for the form? Something's obviously not right somewhere.

|

J86 · Accepted Answer · 2014-02-13 11:47:25Z

So after a long discussion with Archer and many others, we figured the problem out.

The input form was coming through a PartialView.cshtml in my ASP.NET MVC application. Even though I had my plugin initialization code wrapped around a jQuery's .on() function, the plugin was still attempting to initialize things on initial page load.

I'm not sure why that is, my guess is that the plugin was designed that way!

So what I did was, I moved all script files related to the plugin from MVC's _Layout.cshtml and put them inside my _PartialView.cshtml.

This forced the plugin scripts to run as soon as the partial appeared on the page, and the plugin then worked fine.

NOTE: You still need to ensure that the ordering of the script files is correct.

jQuery
Widget UI
iFrame Transport
FileUpload

I hope this helps.

Collectives™ on Stack Overflow

Select dynamic HTML Element via jQuery

2 Answers 2

14 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

14 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related