时间戳

首页 > 解决方案 > 根据 AJAX 请求打印 div

javascript - 根据 AJAX 请求打印 div

问题描述

我所做的前提原则上很简单：

用户访问该页面。

  1. 对后端函数进行 AJAX 调用，该函数检查数据库中要打印的文档

  2. 如果返回数据，则运行一个循环，并在该循环内进行另一个 AJAX 调用以生成收据 HTML。

  3. 如果成功生成 HTML，则将其附加到元素 (printDiv)。这会强制 window.print 函数运行。

  4. 成功打印后，将进行最终调用以更新已打印这些文档的数据库。

问题：在第一次访问页面时。进行调用，当它最终找到数据时，它会返回它。但是在第一次访问时，它甚至没有时间将 HTML 附加到文档中，而是打开了打印对话框。一旦对话关闭，它就会将 HTML 附加到文档中。

代码：

<script>
        var isActive = true;
        var isEmpty = true;
    
        $( document ).ready(function () {
            pollServer();
        });
        
        function pollServer()
        {
            if (isActive)
            {
                window.setTimeout(function () {
                    var isEmpty = true;
                    $.ajax({
                        url: "<?php echo site_url('CONTROLLER/unprinted');?>",
                        type: "POST",
                        dataType: "json",
                        success: function (result) {
                            for (var key in result) {
                               if (result.hasOwnProperty(key)) {
                                     isEmpty = false;
                                     getReceipt(result[key].id);
                               }
                            } 
                                                        
                            if( isEmpty == false ) {
                                console.log(isEmpty);
                                // chrome callback
                                var printCompleteCallback = function () {
                                    console.log('chrome');
                                }
                                
                                window.print();
                                if (window.onafterprint) { //check if browser supports window.onafterprint event handler (Firefox and IE)
                                    $(window).one("afterprint", printCompleteCallback);
                                    
                                    for (var key in result) {
                                       if (result.hasOwnProperty(key)) {
                                             updatePrintReceipt(result[key].id);
                                             console.log('print complete');
                                       }
                                    } 
                                }
                                else {
                                    setTimeout(printCompleteCallback, 0);
                                    
                                    // update db for those printed
                                    for (var key in result) {
                                       if (result.hasOwnProperty(key)) {
                                             updatePrintReceipt(result[key].id);
                                             console.log('other brower');
                                       }
                                    } 
                                    
                                }
                                    
                               $('#printDiv').html('');
                            }
                            
                             
                            //SUCCESS LOGIC
                            pollServer();
                            
                        },
                        error: function(xhr, status, error){
                             var errorMessage = xhr.status + ': ' + xhr.statusText
                             console.log('Error - ' + errorMessage);
                             pollServer();
                         }});
                }, 2500);
            }
        }
        
        function getReceipt(id){
            $.ajax({
                url: "<?php echo site_url('CONTROLLER/receipt_auto');?>" + "/" + id,
                type: "POST",
                success: function (result) {
                    $('#printDiv').append(result);
                },
                error: function(xhr, status, error){
                     var errorMessage = xhr.status + ': ' + xhr.statusText
                     console.log('Error - ' + errorMessage);
                }});
        }
        
        function updatePrintReceipt(id){
            $.ajax({
                url: "<?php echo site_url('CONTROLLER/receipt_update');?>" + "/" + id,
                type: "POST",
                success: function (result) {
                    console.log(result);
                },
                error: function(xhr, status, error){
                     var errorMessage = xhr.status + ': ' + xhr.statusText
                     console.log('Error - ' + errorMessage);
                 }});
        }


        
    </script>

标签： javascripthtmljquerycodeigniter

解决方案

JQuery 默认异步运行 AJAX 请求（文档）：

async (default: true)
Type: Boolean
By default, all requests are sent asynchronously (i.e. this is set to true by default). 
If you need synchronous requests, set this option to false.

这意味着调用在该ajax 调用完成window.print()之前发生。getReceipt()您的内部 AJAX 调用需要同步运行，以便外部 AJAX 调用在完成之前无法继续。

推荐阅读