提交Ajax后重置自定义文件输入

Question

I have custom file inputs on a form that submits files through ajax. Everything works correctly and the form gets reset. But I have some javascript actions that are supposed to take place after there's a change in the file input but it only works the first time a file is selected and submitted.

_form.html.erb

<%= simple_form_for(@medium, :html => { :id => 'media_form', :multipart => true }, remote: true) do |f| %>

    <div class="custom-file-upload fu1_wrap">

        <label for="file-upload" class="cfu_label"><i class="icon-arrow-up icon-white"></i> Browse
          <%= f.input :asset, label: false, error: false, as: :file, :input_html => { id: 'file-upload', class: 'cfu' } %>
        </label>

    </div>

    <%= f.button :submit, 'Upload', :class => "btn btn-warning" %>

<% end %>

file-input.css

.custom-file-upload input[type="file"] {
    /*opacity: 0;
    filter: alpha(opacity=0);*/
    position: absolute;
    left: -9999px;
}
.cfu_label {
  padding: 6px 12px;
  display: inline-block;
  background: #f06048;
  cursor: pointer;
  color: #fff;
  /* font-size: 15px; */
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-radius: 5px;
  opacity: .85;
}
.cfu_label:hover {
    opacity: 1;
}

file-input.js

$(document).ready(function() {

    $('#file-upload').change(function() {
        $('i', '.fu1_wrap').removeClass("icon-arrow-up");
        $('i', '.fu1_wrap').addClass("icon-ok");
        $('label[for="file-upload"]', '.fu1_wrap').css("background-color", '#3fa46a');
    });

});

create.js.erb

$('i', '.custom-file-upload').removeClass("icon-ok");
$('i', '.custom-file-upload').addClass("icon-arrow-up");
$('.cfu_label', '.custom-file-upload').css("background-color", '#f06048');
$(".m_list").prepend("<%= escape_javascript(render :partial => @medium, :locals => {:medium => @medium}) %>");
$('#media').modal('hide');
$('#media_form')[0].reset();

As I stated the form submits perfectly fine; the problem is that if I try to submit another file after the first one the code from my file-input.js doesn't seem to be firing as the button doesn't change again. It only works the first time. What am I missing here? Thanks in advance.

Answer 1

You are attaching your event handler on document "ready" event, but this event only fires once - when the page is first fully loaded. Right code would be something like this:

$(document.body).on('change', '#file-upload', function() {
  $('i', '.fu1_wrap').removeClass("icon-arrow-up");
  $('i', '.fu1_wrap').addClass("icon-ok");
  $('label[for="file-upload"]', '.fu1_wrap').css("background-color", '#3fa46a');
});

Here I attached event handler unobtrusively to the body tag. see documentation .

Edit: to give you more insight on what is happening - you are attaching event handler to your input DOM node, but after you re-render rails view via ajax, that node is gone, rails UJS driver removes it with the rest of the page before inserting re-rendered view, and so event handler is gone too.