根据 AJAX 请求打印 div
Printing a div based on an AJAX request
我做的前提原理很简单:
用户访问该页面。
对后端函数进行 AJAX 调用,检查数据库中是否有要打印的文档
如果返回数据,循环是运行,并且在该循环内进行另一个AJAX调用以生成收据HTML。
如果成功生成HTML,它会附加到一个元素(printDiv)。然后,这将 window.print 函数强制为 运行.
打印成功后,将进行最后一次调用以更新打印这些文档的数据库。
问题:第一次访问页面时。调用已完成,当它最终找到数据时 returns 它。但是在第一次访问时,它甚至没有时间将 HTML 附加到文档中,而是调出打印对话框。
对话关闭后,它会将 HTML 附加到文档中。
ID 990 加载到 AJAX,没有 HTML 附加到 printDiv,出现打印对话框。
打印对话框关闭,然后将 ID 990 HTML 附加到 div。
ID 991 载入 AJAX,HTML 附加到 printDiv,出现打印对话框但打印 ID 990 HTML。
ID 992 载入 AJAX,HTML 附加到 printDiv,出现打印对话框但打印 ID 991 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>
JQuery 运行s AJAX 默认异步请求 (docs):
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.
这意味着对 window.print()
的调用发生在 getReceipt()
ajax 调用完成之前。您的内部 AJAX 调用需要 运行 同步,以便外部 AJAX 调用在完成之前无法继续。
我做的前提原理很简单:
用户访问该页面。
对后端函数进行 AJAX 调用,检查数据库中是否有要打印的文档
如果返回数据,循环是运行,并且在该循环内进行另一个AJAX调用以生成收据HTML。
如果成功生成HTML,它会附加到一个元素(printDiv)。然后,这将 window.print 函数强制为 运行.
打印成功后,将进行最后一次调用以更新打印这些文档的数据库。
问题:第一次访问页面时。调用已完成,当它最终找到数据时 returns 它。但是在第一次访问时,它甚至没有时间将 HTML 附加到文档中,而是调出打印对话框。 对话关闭后,它会将 HTML 附加到文档中。
ID 990 加载到 AJAX,没有 HTML 附加到 printDiv,出现打印对话框。
打印对话框关闭,然后将 ID 990 HTML 附加到 div。
ID 991 载入 AJAX,HTML 附加到 printDiv,出现打印对话框但打印 ID 990 HTML。
ID 992 载入 AJAX,HTML 附加到 printDiv,出现打印对话框但打印 ID 991 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>
JQuery 运行s AJAX 默认异步请求 (docs):
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.
这意味着对 window.print()
的调用发生在 getReceipt()
ajax 调用完成之前。您的内部 AJAX 调用需要 运行 同步,以便外部 AJAX 调用在完成之前无法继续。