Html 使用remotipart提交带有文件输入的表单时，会将文本区域包装为响应

使用RubyonRails4和Ruby2

下面是我的简单控制器操作。当验证失败时，我呈现“new”操作并将视图的内容注入

.ajax目标

div

$("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");

---

---

此works结构适用于每种类型的表单，但具有文件输入类型且具有选定文件的表单除外。如果提交表单时所有字段均为空，则可以看到表单重新加载良好。如果我选择一个图像并将其他字段留空（以触发验证），我会得到：

由于ajax:Error响应而导致的“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>

divclass=&39；ajax目标&39；id='；Popubox和#39；
h1新楼层/h1
部门id='；Popuperor'；
保险商实验室
锂
strong前缀/strong
已经采取了行动
/李
/保险商实验室
/div
div class='；clearfix和#39/div
部门id='；表格持有人'；
form accept charset=“UTF-8”action=“/floors”class=“simple\u form remote form”data remote=“true”enctype=“multipart/form data”id=“new\u floor”method=“post”novalidate=“novalidate”div style=“margin:0；padding:0；display:inline”input name=“utf8”type=“hidden”value=“&；\x2713；”div div div class=“输入字符串所需楼层名称”标签类=“所需字符串控制标签”for=“floor\u name”abbr title=“required”*/abbr name/labelinput class=“string required”id=“floor\u name”name=“floor[name]”type=“text”value=“FLR001”/div
div class=“输入字符串所需楼层前缀字段\带有错误”label class=“字符串所需控制标签”for=“floor\u prefix”abbr title=“required”*/abbr prefix/labelinput class=“string required”id=“floor\u prefix”name=“floor[prefix]”type=“text”value=“FLR001”/div
div class=&39；clearfix&39；/div
div class=“输入文件所需楼层平面”label class=“文件所需控制标签”for=“楼层平面”abbr title=“所需”*/abbr Floorplan/labelinput class=“文件所需”id=“楼层平面”name=“楼层[平面]”type=“文件”//div
div class=&39；clearfix&39；/div
输入class=“btn”name=“commit”type=“submit”value=“创建楼层”/
/形式
/div
/div

考虑到发帖日期，我知道现在回答这个问题已经太迟了。但我希望如果有人最终找到答案，这会很有用

render_with_remotipart def以这种方式呈现，这是有原因的

就这么做吧，例如，在咖啡脚本中，但你的想法是对的。

var element = "#parent_element_with_form"

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

或

取决于你的申请情况

<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>

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'