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.

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

Answer 2

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.