[英]Submitting a form with file input using remotipart wraps a textarea to response
Using Ruby on Rails 4 and Ruby 2. 使用Ruby on Rails 4和Ruby 2。
Here's my simple controller action. 这是我简单的控制器动作。 When validation fails I render the 'new' action and inject the contents of the view into the
.ajax-target
div. 验证失败时,我将执行“新”操作,并将视图内容注入
.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'
This works structure works fine for every type of form except ones that have a file input type that have a selected file. 对于所有类型的表单,此工作结构均能正常工作,但文件输入类型中具有选定文件的表单除外。 If I submit the form with all fields blank, I see the form reloading fine.
如果我提交的表单中所有字段均为空白,则可以重新加载表单。 If I select an image and leave other fields blank (to trigger the validations) I get:
如果选择图像并将其他字段留空(以触发验证),则会得到:
"Error" text because of the ajax:error
response. 由于存在
ajax:error
响应,因此出现“错误”文本。 And also see this in the Network tab: 并在“网络”标签中看到以下内容:
<textarea data-type="text/html" data-status="200" data-statusText="OK"><div class='ajax-target' id='popupBox'>
<h1>New Floor</h1>
<div id='popupErrors'>
<ul>
<li>
<strong>Prefix</strong>
has already been taken
</li>
</ul>
</div>
<div class='clearfix'></div>
<div id='formHolder'>
<form accept-charset="UTF-8" action="/floors" class="simple_form remote-form" data-remote="true" enctype="multipart/form-data" id="new_floor" method="post" novalidate="novalidate"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div> <div class="input string required floor_name"><label class="string required control-label" for="floor_name"><abbr title="required">*</abbr> Name</label><input class="string required" id="floor_name" name="floor[name]" type="text" value="FLR001" /></div>
<div class="input string required floor_prefix field_with_errors"><label class="string required control-label" for="floor_prefix"><abbr title="required">*</abbr> Prefix</label><input class="string required" id="floor_prefix" name="floor[prefix]" type="text" value="FLR001" /></div>
<div class='clearfix'></div>
<div class="input file required floor_plan"><label class="file required control-label" for="floor_plan"><abbr title="required">*</abbr> Floorplan</label><input class="file required" id="floor_plan" name="floor[plan]" type="file" /></div>
<div class='clearfix'></div>
<input class="btn" name="commit" type="submit" value="Create Floor" />
</form>
</div>
</div>
</textarea>
I know this is too late to answer considering the date of the post.But I hope it is useful if someone ends up looking for an answer. 考虑到发布日期,我知道现在回答还为时已晚,但我希望如果有人最终找到答案,这将很有用。
The render_with_remotipart def renders that way and there is a reason for that.Without worrying about that you can just handle it in the javascript see eg here render_with_remotipart def以这种方式渲染,这是有原因的。不用担心,您可以在javascript中处理它,请参见例如此处
Just do eg. 只是做例如。 is in coffeescript but you get the idea right.
在coffeescript中,但您的想法正确。
var element = "#parent_element_with_form"
$(form).on 'ajax:remotipartComplete', (e, data) ->
$(element).html($(data.responseText).html())
or 要么
$(form).on 'ajax:success' && $(form).on 'ajax:error'
depending on your application circumstances. 取决于您的应用环境。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.