Отправить Ajax Form using Rails

Question

В моем приложении Rails я хочу обновить модель, когда пользователь загрузит изображение. Изображение будет отображаться на странице сразу после выбора изображения, но изображение должно быть загружено в фоновом режиме в виде вызова AJAX. Другими словами, форма должна быть отправлена ​​без пользователю, нажав кнопку отправки, - он должен автоматически отправить форму после выбора файла.

В моей текущей реализации появившееся изображение появляется на странице, но оно запускает обновление HTML, которое заставляет страницу обновляться, даже если в форме задано значение true. Как обеспечить отправку формы в виде запроса AJAX?

(я последовал примеру на этой странице: Submit form in rails 3 in an ajax way (with jQuery))

<%= form_for [@collection], :html => {:id => "collection_avatar_form" }, :remote => true do |f| %> 
     <div id="uploadImageWrapper" title="Edit Avatar"> 
     <%= image_tag(@collection.image_url(:thumb), :class=>"img-rounded") %> 
     <div id="editAvatarIcon"><icon class="fa fa-pencil"></icon></div> 
     <%= f.file_field :image %> 
    </div> 
<% end %> 

который создает этот HTML:

<form accept-charset="UTF-8" action="/collections/introduction-to-product-design--3" class="edit_collection" data-remote="true" enctype="multipart/form-data" id="collection_avatar_form" method="post"> 

Javascript:

$('#collection_image').change(function(){ 
    var F = this.files; 

    var reader = new FileReader(); 
    var image = new Image(); 
    reader.readAsDataURL(F[0]); 
    reader.onload = function(_file){ 
     image.src = _file.target.result;   
     image.onload = function() { 
      $('#collectionAvatar').find('img').attr('src', this.src); 
     }; 
    } 
    $('#collection_avatar_form').trigger('submit.rails'); 
    }); 

Answer 1

Это то, что в конечном итоге работает для меня (где #collection_image это идентификатор file_field и #collection_image_form это форма)

$('#collection_image').change(function(){ 
    var F = this.files; 

    var reader = new FileReader(); 
    var image = new Image(); 
    reader.readAsDataURL(F[0]); 
    reader.onload = function(_file){ 
     image.src = _file.target.result;    
     image.onload = function() { 
      $('#collectionAvatar').find('img').attr('src', this.src); 
     }; 
    } 

    $.ajax({ 
      type: "POST", 
      url: $('#collection_avatar_form').attr('action'), 
      data: new FormData($('#collection_avatar_form')[0]), 
      processData: false, 
      contentType: false,   
      dataType: "JSON" 
     }).success(function(json){ 
      console.log("success", json); 
    }); 

    }); 

Answer 2

Вы должны использовать

$.post('yourURL', this.form.serialize()) 

вместо

this.form.submit();