Отправка формы с вводом файла с использованием remotipart оборачивает текстовое поле в ответ

Использование Ruby on Rails 4 и Ruby 2.

Вот мое простое действие контроллера. Когда проверка не удалась, я рендерил "новое" действие и вставлял содержимое представления в .ajax-target дела.

$("body").on("ajax:success", '.remote-form', (e, data, status, xhr) ->
    $(this).parent().parent().after(xhr.responseText);
    $.colorbox.resize();
  ).on "ajax:error", '.remote-form', (e, xhr, status, error) ->
    $(this).parent().parent().after("Error");

def create
  @floor = Floor.new(floor_params)
  if @floor.save
    render action: 'edit', layout: false
  else
    render action: 'new', layout: false
  end
end

#popupBox.ajax-target
  %h1 New Floor
  = render 'shared/form_errors', resource: @floor
  #formHolder
    = simple_form_for @floor, html: { multipart: true, class: 'remote-form' }, remote: true do |f|
      = f.input :name, required: true
      = f.input :prefix, required: true
      = f.input :plan, class: 'file_hidden', label: 'Floorplan'

      .clearfix
      = f.button :submit, 'Create Floor'

Эта рабочая структура отлично работает для всех типов форм, кроме тех, которые имеют тип ввода файла, в котором есть выбранный файл. Если я отправляю форму с пустыми полями, я вижу, что форма перезагружается нормально. Если я выбираю изображение и оставляю другие поля пустыми (для запуска проверки), я получаю:

Текст "Ошибка" из-за ajax:error ответ. А также посмотрите это на вкладке Сеть:

<textarea data-type="text/html" data-status="200" data-statusText="OK">&lt;div class=&#39;ajax-target&#39; id=&#39;popupBox&#39;&gt;
  &lt;h1&gt;New Floor&lt;/h1&gt;
  &lt;div id=&#39;popupErrors&#39;&gt;
    &lt;ul&gt;
      &lt;li&gt;
        &lt;strong&gt;Prefix&lt;/strong&gt;
        has already been taken
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class=&#39;clearfix&#39;&gt;&lt;/div&gt;
  &lt;div id=&#39;formHolder&#39;&gt;
    &lt;form accept-charset=&quot;UTF-8&quot; action=&quot;/floors&quot; class=&quot;simple_form remote-form&quot; data-remote=&quot;true&quot; enctype=&quot;multipart/form-data&quot; id=&quot;new_floor&quot; method=&quot;post&quot; novalidate=&quot;novalidate&quot;&gt;&lt;div style=&quot;margin:0;padding:0;display:inline&quot;&gt;&lt;input name=&quot;utf8&quot; type=&quot;hidden&quot; value=&quot;&amp;#x2713;&quot; /&gt;&lt;/div&gt;    &lt;div class=&quot;input string required floor_name&quot;&gt;&lt;label class=&quot;string required control-label&quot; for=&quot;floor_name&quot;&gt;&lt;abbr title=&quot;required&quot;&gt;*&lt;/abbr&gt; Name&lt;/label&gt;&lt;input class=&quot;string required&quot; id=&quot;floor_name&quot; name=&quot;floor[name]&quot; type=&quot;text&quot; value=&quot;FLR001&quot; /&gt;&lt;/div&gt;
        &lt;div class=&quot;input string required floor_prefix field_with_errors&quot;&gt;&lt;label class=&quot;string required control-label&quot; for=&quot;floor_prefix&quot;&gt;&lt;abbr title=&quot;required&quot;&gt;*&lt;/abbr&gt; Prefix&lt;/label&gt;&lt;input class=&quot;string required&quot; id=&quot;floor_prefix&quot; name=&quot;floor[prefix]&quot; type=&quot;text&quot; value=&quot;FLR001&quot; /&gt;&lt;/div&gt;
        &lt;div class=&#39;clearfix&#39;&gt;&lt;/div&gt;
        &lt;div class=&quot;input file required floor_plan&quot;&gt;&lt;label class=&quot;file required control-label&quot; for=&quot;floor_plan&quot;&gt;&lt;abbr title=&quot;required&quot;&gt;*&lt;/abbr&gt; Floorplan&lt;/label&gt;&lt;input class=&quot;file required&quot; id=&quot;floor_plan&quot; name=&quot;floor[plan]&quot; type=&quot;file&quot; /&gt;&lt;/div&gt;
        &lt;div class=&#39;clearfix&#39;&gt;&lt;/div&gt;
        &lt;input class=&quot;btn&quot; name=&quot;commit&quot; type=&quot;submit&quot; value=&quot;Create Floor&quot; /&gt;
    &lt;/form&gt;
  &lt;/div&gt;
&lt;/div&gt;
</textarea>
Источник

1 ответ

Я знаю, что уже слишком поздно, чтобы ответить, учитывая дату поста. Но я надеюсь, что это будет полезно, если кто-то в конечном итоге ищет ответ.

Функция render_with_remotipart рендерится таким образом, и для этого есть причина. Не беспокоясь о том, что вы можете просто обработать это в JavaScript, см., Например, здесь

Просто сделайте, например. в coffeescript, но вы правильно поняли.

var element = "#parent_element_with_form"

$(form).on 'ajax:remotipartComplete', (e, data) -> 
  $(element).html($(data.responseText).html())

или же

$(form).on 'ajax:success' && $(form).on 'ajax:error'

в зависимости от ваших условий применения.

Источник
Другие вопросы по тегам