我有一个呈现部分的JQuery弹出窗口:
$(document).ready(function () {
editUserItem();
});
function editUserItem(){
var myWindow = window.open("", "MsgWindow", "width=600,height=400");
myWindow.document.write("<%= j render partial: 'edit_user_item_form', locals: {item: @user_item}%>");
}
}
以下是部分中的表格:
<div class="edititem">
<h4>Edit "<%= item.name %>"</h4>
<%= form_for current_user.user_items.build, url: user_items_path, method: :patch,remote: true, authenticity_token: true do |f| %>
<%= f.hidden_field :id, value: item.id %>
<%= f.text_field :name, value: item.name, class: "txt" %>
<%= f.number_field :price, min: 0.00, :step => "0.01", value: item.price, class: "price"%>
<%= f.select :category_id do %>
<% current_user.categories.each do |category| %>
<%= content_tag(:option, category.name, value: category.id) %>
<% end %>
<% end %>
<%= f.submit "Update Item", class: 'submit-edit' %>
<% end %>
</div>
我想在提交表单后关闭此窗口。我意识到window.close()只能在用window.open()打开的窗口上使用,但实际情况就是如此。这就是我的尝试:
$(document).ready(function () {
editUserItem();
closeWindow();
});
function editUserItem(){
var myWindow = window.open("", "MsgWindow", "width=600,height=400");
myWindow.document.write("<%= j render partial: 'edit_user_item_form', locals: {item: @user_item}%>");
closeWindow();
}
function closeWindow(){
$('.submit-edit').click(function() {
myWindow.close();
});
}
这不起作用。我不确定我的JS脚本是否可以&#34;看到&#34;提交按钮类我在表单中引用,而在提交时,弹出窗口只是呈现默认的&#39; update.html.erb&#39;。
我也刚刚发现了Modal windows ...据我所知,它强制用户在返回原始页面之前与之交互。在这种情况下,这更合适,我该如何实现呢?
@ guest271314的脚本在经过一些修改后适用于我的rails应用程序,但它仍然没有关闭窗口...也许我没有把它粘在正确的位置?我把它放在我的form_for:
下面<div class="edititem">
<h4>Edit "<%= item.name %>"</h4>
<%= form = form_for current_user.user_items.build, url: user_items_path, method: :patch,remote: true, authenticity_token: true do |f| %>
<%= f.hidden_field :id, value: item.id %>
<%= f.text_field :name, value: item.name, class: "txt" %>
<%= f.number_field :price, min: 0.00, :step => "0.01", value: item.price, class: "price"%>
<%= f.select :category_id do %>
<% current_user.categories.each do |category| %>
<%= content_tag(:option, category.name, value: category.id) %>
<% end %>
<% end %>
<%= f.submit "Update Item", class: 'submit-edit' %>
<% end %>
</div>
<script>
window.opener.console.log("form.html loaded");
//const form = document.forms[0];
form.onsubmit = (event) => {
event.preventDefault();
fetch("<%= user_items_path %>", {
method: "PATCH",
body: new FormData('<%= form %>')
})
.then(response => response.ok)
.then(submitted => {
if (submitted)
window.close()
})
.catch(err => {
window.opener.console.error(err)
})
}
</script>
答案 0 :(得分:0)
您可以阻止FormData
提交的默认操作,使用fetch()
和<form>
提交.then()
元素。链式window.close()
来电<!DOCTYPE html>
<html>
<form>
<input type="text">
<input type="submit">
</form>
<script>
window.opener.console.log("form.html loaded");
const form = document.forms[0];
form.onsubmit = (event) => {
event.preventDefault();
fetch("/path/to/server", {
method: "POST",
body: new FormData(form)
})
.then(response => response.ok)
.then(submitted => {
if (submitted)
window.close()
})
.catch(err => {
window.opener.console.error(err)
})
}
</script>
</html>
{{1}}