[英]How to execute AJAX request after succeeding previous AJAX request for printing request via thermal printing
I've some problem with AJAX request. 我对AJAX请求有问题。 As the title said, I want to execute an AJAX request after succeeding previous AJAX, for printing via thermal printer.
如标题所述,我想在继上一个AJAX之后执行AJAX请求,以通过热敏打印机进行打印。
So far, I have some buttons with 3 different IDs. 到目前为止,我有一些带有3个不同ID的按钮。 Every IDs will execute an AJAX request to query an update into database, and it's succeeded.
每个ID都会执行AJAX请求以将更新查询到数据库中,并且更新成功。 But then I want to execute another AJAX request for printing via thermal printer (QPOS Q58M) via escpos-php .
但是然后我想通过escpos-php通过热敏打印机(QPOS Q58M)执行另一个AJAX请求进行打印。 The result think it's success but no printing done.
结果认为这是成功的,但没有完成打印。 Then I tried to execute the printing script without AJAX and it's succeeded.
然后,我尝试在没有AJAX的情况下执行打印脚本,并且脚本成功。
Here's the HTML view 这是HTML视图
<div class="row">
<div class="col-lg-4 col-md-4 col-xs-12">
<button class="btn btn-app btn-purple">
<div >Certificate</div>
</button>
<button id="simpan_antrian1" class="btn btn-app btn-purple print">
<i style="padding:55px 0;font-size:100px" class="ace-icon fa fa-user-plus"></i>
</button>
<button class="btn btn-app btn-purple">
<div id="load_antrian1"></div>
</button>
</div>
<div class="col-lg-4 col-md-4 col-xs-12">
<button class="btn btn-app btn-purple">
<div >Test</div>
</button>
<button id="simpan_antrian2" class="btn btn-app btn-purple print">
<i style="padding:55px 0;font-size:100px" class="ace-icon fa fa-user-plus"></i>
</button>
<button class="btn btn-app btn-purple">
<div id="load_antrian2"></div>
</button>
</div>
<div class="col-lg-4 col-md-4 col-xs-12">
<button class="btn btn-app btn-purple">
<div >Course</div>
</button>
<button id="simpan_antrian3" class="btn btn-app btn-purple print">
<i style="padding:55px 0;font-size:100px" class="ace-icon fa fa-user-plus"></i>
</button>
<button class="btn btn-app btn-purple">
<div id="load_antrian3"></div>
</button>
</div>
</div>
And here is the script for calling the request 这是调用请求的脚本
<script type="text/javascript">
$(document).ready(function(){
$('#load_antrian1').load('pages/beranda/getAntrian1.php');
$('#load_antrian2').load('pages/beranda/getAntrian2.php');
$('#load_antrian3').load('pages/beranda/getAntrian3.php');
// antrian sertifikat
$("#simpan_antrian1").on('click',function(){
$.ajax({
url : "pages/beranda/proses1.php",
type : "POST",
cache : false,
success: function(
if(msg=="Sukses"){
$('#load_antrian1').load('pages/beranda/getAntrian1.php').fadeIn("slow");
$('#load_antrian2').load('pages/beranda/getAntrian2.php').fadeIn("slow");
$('#load_antrian3').load('pages/beranda/getAntrian3.php').fadeIn("slow");
$.ajax({
url : "pages/beranda/print.php",
type: "POST",
cache: false,
//success: function(data, textStatus, jqXHR)
success: function()
{
alert('Please take your ticket');
}
error:function (){
alert("There is an error when printing")
}
});
}
}
});
});
// antrian Test
$("#simpan_antrian2").on('click',function(){
$.ajax({
url : "pages/beranda/proses2.php",
type : "POST",
cache : false,
success: function(
if(msg=="Sukses"){
$('#load_antrian1').load('pages/beranda/getAntrian1.php').fadeIn("slow");
$('#load_antrian2').load('pages/beranda/getAntrian2.php').fadeIn("slow");
$('#load_antrian3').load('pages/beranda/getAntrian3.php').fadeIn("slow");
$.ajax({
url : "pages/beranda/print.php",
type: "POST",
cache: false,
//success: function(data, textStatus, jqXHR)
success: function()
{
alert('Please take your ticket');
}
error:function (){
alert("There is an error when printing")
}
});
}
}
});
});
// antrian Test
$("#simpan_antrian3").on('click',function(){
$.ajax({
url : "pages/beranda/proses3.php",
type : "POST",
cache : false,
success: function(
if(msg=="Sukses"){
$('#load_antrian1').load('pages/beranda/getAntrian1.php').fadeIn("slow");
$('#load_antrian2').load('pages/beranda/getAntrian2.php').fadeIn("slow");
$('#load_antrian3').load('pages/beranda/getAntrian3.php').fadeIn("slow");
$.ajax({
url : "pages/beranda/print.php",
type: "POST",
cache: false,
//success: function(data, textStatus, jqXHR)
success: function()
{
alert('Please take your ticket');
}
error:function (){
alert("There is an error when printing")
}
});
}
}
});
});
});
</script>
UPDATE
更新
Well I've tried to make a new button for printing so it won't make a nested AJAX request, but unfortunately still can't do the trick... Here's my last change 好吧,我尝试制作一个新的打印按钮,这样它就不会发出嵌套的AJAX请求,但是不幸的是仍然无法解决问题……这是我的最后一次更改
HTML 的HTML
<div class="row">
<div class="col-lg-4 col-md-4 col-xs-12">
<button class="btn btn-app btn-purple">
<div >Certificate</div>
</button>
<button id="simpan_antrian1" class="btn btn-app btn-purple print">
<i style="padding:55px 0;font-size:100px" class="ace-icon fa fa-user-plus"></i>
</button>
<button class="btn btn-app btn-purple">
<div id="load_antrian1"></div>
</button>
</div>
<div class="col-lg-4 col-md-4 col-xs-12">
<button class="btn btn-app btn-purple">
<div >Test</div>
</button>
<button id="simpan_antrian2" class="btn btn-app btn-purple print">
<i style="padding:55px 0;font-size:100px" class="ace-icon fa fa-user-plus"></i>
</button>
<button class="btn btn-app btn-purple">
<div id="load_antrian2"></div>
</button>
</div>
<div class="col-lg-4 col-md-4 col-xs-12">
<button class="btn btn-app btn-purple">
<div >Course</div>
</button>
<button id="simpan_antrian3" class="btn btn-app btn-purple print">
<i style="padding:55px 0;font-size:100px" class="ace-icon fa fa-user-plus"></i>
</button>
<button class="btn btn-app btn-purple">
<div id="load_antrian3"></div>
</button>
</div>
<div class="col-lg-12 col-md-12 col-xs-12">
<button class="btn btn-app btn-purple" id="print">
<i style="font-size:2em" class="ace-icon fa fa-print"></i> Print your ticket
</button>
</div>
</div>
Javascript Java脚本
$(document).ready(function(){
$('#load_antrian1').load('pages/beranda/getAntrian1.php');
$('#load_antrian2').load('pages/beranda/getAntrian2.php');
$('#load_antrian3').load('pages/beranda/getAntrian3.php');
// antrian sertifikat
$("#simpan_antrian1").on('click',function(){
$.ajax({
url : "pages/beranda/proses1.php",
type : "POST",
cache : false,
success: function(msg){
if(msg=="Sukses"){
$('#load_antrian1').load('pages/beranda/getAntrian1.php').fadeIn("slow");
$('#load_antrian2').load('pages/beranda/getAntrian2.php').fadeIn("slow");
$('#load_antrian3').load('pages/beranda/getAntrian3.php').fadeIn("slow");
}
}
});
});
// antrian Test
$("#simpan_antrian2").on('click',function(){
$.ajax({
url : "pages/beranda/proses2.php",
type : "POST",
cache : false,
success: function(msg)
{
if(msg=="Sukses"){
$('#load_antrian1').load('pages/beranda/getAntrian1.php').fadeIn("slow");
$('#load_antrian2').load('pages/beranda/getAntrian2.php').fadeIn("slow");
$('#load_antrian3').load('pages/beranda/getAntrian3.php').fadeIn("slow");
}
}
});
});
// antrian Test
$("#simpan_antrian3").on('click',function(){
$.ajax({
url : "pages/beranda/proses3.php",
type : "POST",
cache : false,
success: function(msg)
{
if(msg=="Sukses"){
$('#load_antrian1').load('pages/beranda/getAntrian1.php').fadeIn("slow");
$('#load_antrian2').load('pages/beranda/getAntrian2.php').fadeIn("slow");
$('#load_antrian3').load('pages/beranda/getAntrian3.php').fadeIn("slow");
}
}
});
});
$("#print").on('click',function () {
$.ajax({
url : "pages/beranda/print.php",
type: "POST",
cache: false,
//success: function(data, textStatus, jqXHR)
success: function()
{
alert('Please take your ticket');
},
error:function (){
alert("There is an error when printing");
}
});
})
});
well still can't do the printing, but the AJAX response it as success 仍然无法完成打印,但AJAX认为成功
UPDATE
更新
For documentation purpose, I put the print script below 出于文档目的,我将打印脚本放在下面
<?php
//date_default_timezone_set("ASIA/JAKARTA");
// panggil file config.php untuk koneksi ke database
require_once "../../../config/config.php";
// panggil file fungsi nama hari
require_once "../../../config/fungsi_nama_hari.php";
require 'pengunjung/vendor/autoload.php';
use Mike42\Escpos\Printer;
use Mike42\Escpos\PrintConnectors\WindowsPrintConnector;
$hari_ini = date("Y-m-d");
$configID = "1";
// fungsi query untuk menampilkan data dari tabel sys_config
$result = $mysqli->query("SELECT nama_instansi FROM sys_config WHERE configID='$configID'") or die('Ada kesalahan pada query tampil data config: '.$mysqli->error);
$data_config = $result->fetch_assoc();
// fungsi query untuk menampilkan data dari tabel antrian
$result = $mysqli->query("SELECT max(no_antrian) as nomor, loket FROM antrian WHERE tanggal='$hari_ini' ORDER BY no_antrian DESC LIMIT 1") or die('Ada kesalahan pada query tampil nomor antrian: '.$mysqli->error);
$data = $result->fetch_assoc();
$nama_instansi = $data_config['nama_instansi'];
$loket = $data['loket'];
$no_antrian = $data['nomor'];
$hari = date("l");
$tanggal = date("d-m-Y");
$jam = date("H:i:s");
$connector = new WindowsPrintConnector("POS-58");
$printer = new Printer($connector);
$printer->setJustification(Printer::JUSTIFY_CENTER);
/* Name of shop */
$printer -> selectPrintMode(Printer::MODE_DOUBLE_WIDTH);
$printer -> text($nama_instansi."\n");
$printer -> selectPrintMode();
$printer -> text($hari." ".$tanggal." ".$jam."\n");
$printer -> feed();
/* Title of receipt */
$printer -> setEmphasis(true);
$printer -> text("YOUR QUEUE\n");
$printer -> setEmphasis(false);
$printer -> feed();
//
$printer -> setJustification(Printer::JUSTIFY_CENTER);
$printer -> setTextSize(8, 8);
$printer -> text($no_antrian."\n");
$printer -> setTextSize(4, 4);
$printer -> text($loket."\n");
$printer -> feed();
$printer -> cut();
$printer -> pulse();
$printer -> close();
echo 'sukses';
?>
You have some mistakes in your js code.
您的js代码中有一些错误。 Check below code..
检查以下代码。
<script type="text/javascript">
$(document).ready(function(){
$('#load_antrian1').load('pages/beranda/getAntrian1.php');
$('#load_antrian2').load('pages/beranda/getAntrian2.php');
$('#load_antrian3').load('pages/beranda/getAntrian3.php');
// antrian sertifikat
$("#simpan_antrian1").on('click',function(){
$.ajax({
url : "pages/beranda/proses1.php",
type : "POST",
cache : false,
success: function(msg){
if(msg=="Sukses"){
$('#load_antrian1').load('pages/beranda/getAntrian1.php').fadeIn("slow");
$('#load_antrian2').load('pages/beranda/getAntrian2.php').fadeIn("slow");
$('#load_antrian3').load('pages/beranda/getAntrian3.php').fadeIn("slow");
$.ajax({
url : "pages/beranda/print.php",
type: "POST",
cache: false,
//success: function(data, textStatus, jqXHR)
success: function()
{
alert('Please take your ticket');
},
error:function (){
alert("There is an error when printing")
}
});
}
}
});
});
// antrian Test
$("#simpan_antrian2").on('click',function(){
$.ajax({
url : "pages/beranda/proses2.php",
type : "POST",
cache : false,
success: function(msg)
{
if(msg=="Sukses"){
$('#load_antrian1').load('pages/beranda/getAntrian1.php').fadeIn("slow");
$('#load_antrian2').load('pages/beranda/getAntrian2.php').fadeIn("slow");
$('#load_antrian3').load('pages/beranda/getAntrian3.php').fadeIn("slow");
$.ajax({
url : "pages/beranda/print.php",
type: "POST",
cache: false,
//success: function(data, textStatus, jqXHR)
success: function()
{
alert('Please take your ticket');
},
error:function (){
alert("There is an error when printing")
}
});
}
}
});
});
// antrian Test
$("#simpan_antrian3").on('click',function(){
$.ajax({
url : "pages/beranda/proses3.php",
type : "POST",
cache : false,
success: function(msg)
{
if(msg=="Sukses"){
$('#load_antrian1').load('pages/beranda/getAntrian1.php').fadeIn("slow");
$('#load_antrian2').load('pages/beranda/getAntrian2.php').fadeIn("slow");
$('#load_antrian3').load('pages/beranda/getAntrian3.php').fadeIn("slow");
$.ajax({
url : "pages/beranda/print.php",
type: "POST",
cache: false,
//success: function(data, textStatus, jqXHR)
success: function()
{
alert('Please take your ticket');
},
error:function (){
alert("There is an error when printing")
}
});
}
}
});
});
});
</script>
You should try to use promises and callback functions like the example above: 您应该尝试使用promise和回调函数,例如上面的示例:
//an ajax call to return some data from the server, in this case is dynamic based on the action I want to perform
function _ajaxObtenerInfo(action,data){
return $.ajax({
url: 'ajsources/file.php',
type: 'POST',
dataType: 'html',
data: {action: action, data:data}
})
}
//a function to append the content returned on my ajax success
function cargarElement (response1,response2){//pass the responses
//in my case i need to load with data the first tab from a tab list so i have to loop the panels
//to find the id of the current active tab cause the ids where generated randomly
//if you know the id you would not need the loop i use under this comment
var href = $("#listData").children("li.ui-tabs-active").find('a').attr('href');
var div = $("#panels").children('div');
$.each(div, function(index, value) {
//console.log(index,value);
if ($(value).attr('id') == href.substring(1,href.length)) {
$(value).append(response1[0]+response2[0]); //note : my responses are html content so you should manage your response as you needed
}
});
}
//a when callback to manage all promises
$.when(_ajaxObtenerInfo('TPROGRAMADOS',data2),_ajaxObtenerInfo('TSEGUIMIENTO',data2))
//what happends here is that my when will wait 'til all my ajax calls are done and then
//it will execute a function to append my content
.then(function(response1,response2){
cargarElement(response1,response2);
})
Hope it helps =) 希望对您有帮助=)
First I'm sorry, this is a mistake from my print.php code... 首先,对不起,这是我的print.php代码中的一个错误...
I've tried to run this script without AJAX, and found an error that can't find a file 我试图在不使用AJAX的情况下运行此脚本,但发现了找不到文件的错误
require 'pengunjung/vendor/autoload.php';
So I guess it's a small mistake from this thing, and I change it to 所以我想这是一个小错误,我将其更改为
require '../../vendor/autoload.php';
// you should know where this file located
And it works! 而且有效!
Once again, I'm sorry... 再次抱歉
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.