gpt4 book ai didi

html - 使用 remotipart 提交带有文件输入的表单包装一个文本区域以响应

转载 作者:行者123 更新时间:2023-11-28 03:22:37 34 4
gpt4 key购买 nike

使用 Ruby on Rails 4 和 Ruby 2。

这是我的简单 Controller 操作。当验证失败时,我呈现"new"操作并将 View 的内容注入(inject) .ajax-target 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");

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>

最佳答案

我知道考虑到帖子的日期,现在回答已经太晚了。但我希望如果有人最终在寻找答案,它会有用。

render_with_remotipart def 以这种方式呈现,这是有原因的。不用担心,您可以在 javascript 中处理它,例如here

就做,例如。在 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'

取决于您的应用情况。

关于html - 使用 remotipart 提交带有文件输入的表单包装一个文本区域以响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23519034/

34 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com