rails - jquery file uploader not working when form is rendered via ajax

Question

The following page successfully uses ajax and jquery-file-uploader to upload an image:

<%= javascript_include_tag "/assets/jquery.js" %>
<%= javascript_include_tag "/assets/jquery_ujs.js" %>
<%= javascript_include_tag "/assets/jquery-fileupload/jquery.iframe-transport.js" %>
<%= javascript_include_tag "/assets/jquery-fileupload/jquery.fileupload.js" %>
<%= javascript_include_tag "/assets/jquery-fileupload/basic.js" %>
<%= javascript_include_tag "/assets/jquery-fileupload/vendor/tmpl.js" %>
<%= javascript_include_tag "/assets/profiles.js" %>

<%= form_for @profile, :html => {:id => "the_form", :multipart => true}, 
    :authenticity_token => true, remote: true  do |f| %>
         <%= f.file_field :pic,  :id => "filer", :multiple => true %>
<% end %>

However, I am now trying to render the form via ajax. So a user goes to the page, clicks on a button that says "display form", and ajax renders the form on the page. When I do this, the form no longer works. When someone selects a file, the server doesn't do anything. I tried adding a submit button, but then for some weird reason the request is submitted as html and not with ajax. How do I get jquery-file-uploader to work with the ajax rendered form?

Here is the coffee script file being called by the final javascript_include_tag:

jQuery ->
  $('#the_form').fileupload
    dataType: "script"

Answer 1

That you're loading the form with Ajax, I think your fileupload function is not binding to your DOM element. This is a common issue with Ajax, which can be solved by delegating the bind to document, rather than the object specifically:

$('document').fileupload(
    'option',
    'fileInput',
    $('input:file')
);

From this resource

---

JS

The real issue is that JQuery / Javascript performs its element bindings on page load. This means if your element isn't loaded initially, it doesn't exist to JS. The way around this is to bind to the document, or another container, and delegate down to its children