新手求助：如何实现表单关闭时自动触发打印功能

嘿，我来帮你搞定这个自动打印的需求！首先咱们先理清楚你现有代码的逻辑：原来你是通过点击打印按钮触发AJAX更新订单，然后跳转到打印页面。现在要改成不用点击按钮，在表单关闭时自动执行这个流程对吧？

首先先指出你现有代码里的小问题：原来的AJAX代码写在了$(function(){})外面，这样可能会在DOM还没加载完成就执行，容易出问题，咱们要把它放到DOM就绪函数里面。

接下来分两种常见情况给你解决方案：

情况1：表单提交完成后自动触发打印 #

如果你的“表单关闭”是指用户提交表单之后（比如提交成功后弹窗关闭），那咱们可以监听表单的submit事件，取代原来的按钮点击事件：

<!-- 可以把原来的打印按钮隐藏掉，或者直接移除 -->
<a href="#!" target="_blank" id="save-and-print" type="submit" title="Speichern & Drucken" style="display:none;"> 
  <i class="fa fa-print"></i> 
</a> 

<script type="text/javascript" src="/js/summernote.js?v=0.72"></script> 
<script> 
$(function() {
  // 监听表单的提交事件
  $('form').on('submit', function(e) {
    e.preventDefault(); // 阻止浏览器默认的表单提交行为

    // 执行订单更新的AJAX请求
    $.ajax({
      type: "PATCH",
      url: '/myOrders/replacement/' + '{{ $data->id }}',
      data: $(this).serialize(), // 用当前表单的数据序列化提交
      dataType: 'json',
      success: function(data) {
        // 打开打印页面（用window.open不会替换当前页面，体验更好）
        window.open('{{ route('print', [$data->id, 'option' => 'advance']) }}', '_blank');
        // 如果需要刷新当前页面来更新订单状态，保留下面这行；不需要就删掉
        window.location.reload();
      },
      error: function(data) {
        // 显示错误通知（注意要调用show()才会弹出）
        $('body').pgNotification({
          style: "flip",
          message: "Error",
          position: "top-right",
          type: "danger",
          timeout: 4000
        }).show();
      }
    });
  });
});
</script>

情况2：模态框关闭时触发打印 #

如果你的表单是放在Bootstrap模态框里的，“表单关闭”指的是模态框关闭的话，那咱们监听模态框的hidden.bs.modal事件就行（假设模态框的ID是#myModal，你要换成自己的模态框ID）：

<a href="#!" target="_blank" id="save-and-print" type="submit" title="Speichern & Drucken" style="display:none;"> 
  <i class="fa fa-print"></i> 
</a> 

<script type="text/javascript" src="/js/summernote.js?v=0.72"></script> 
<script> 
$(function() {
  // 监听模态框的隐藏事件（关闭后触发）
  $('#myModal').on('hidden.bs.modal', function() {
    // 执行订单更新和打印逻辑
    $.ajax({
      type: "PATCH",
      url: '/myOrders/replacement/' + '{{ $data->id }}',
      data: $('form').serialize(),
      dataType: 'json',
      success: function(data) {
        window.open('{{ route('print', [$data->id, 'option' => 'advance']) }}', '_blank');
        // 可选：刷新页面
        window.location.reload();
      },
      error: function(data) {
        $('body').pgNotification({
          style: "flip",
          message: "Error",
          position: "top-right",
          type: "danger",
          timeout: 4000
        }).show();
      }
    });
  });
});
</script>

几个重要的注意点： #

• 我把原来的location.href改成了window.open，这样打印页面会在新标签页打开，不会替换当前页面，用户体验更好；如果你还是想在当前页面跳转，改回location.href就行。
• 原来的错误通知代码没调用show()，这样通知不会弹出来，我已经加上了。
• 所有JS逻辑都要放到$(function(){})里面，确保DOM加载完成后再执行，避免找不到元素的问题。

内容的提问来源于stack exchange，提问作者Martin