Question

我有一个呈现部分的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>

Answer 1

您可以阻止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}}

提交表格后如何关闭此窗口？

1 个答案: