How to execute AJAX request after succeeding previous AJAX request for printing request via thermal printing
Question
I've some problem with AJAX request. As the title said, I want to execute an AJAX request after succeeding previous AJAX, for printing via thermal printer.
So far, I have some buttons with 3 different IDs. Every IDs will execute an AJAX request to query an update into database, and it's succeeded. But then I want to execute another AJAX request for printing via thermal printer (QPOS Q58M) via escpos-php . The result think it's success but no printing done. Then I tried to execute the printing script without AJAX and it's succeeded.
Here's the HTML view
<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
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
$(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
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';
?>
3 answers
solution1
2 2019-04-02 06:58:07
You have some mistakes in your js code. 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>
solution2
1 2019-04-03 17:55:28
You should try to use promises and callback functions like the example above:
//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 =)
solution3
0 2019-04-04 04:28:27
First I'm sorry, this is a mistake from my print.php code...
I've tried to run this script without AJAX, and found an error that can't find a file
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...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Printing a div based on an AJAX request
Printing datainput in form by Ajax Request not working
How to get to previous ajax request
ignore previous ajax request
Printing out HTML via an Ajax-Request that is having errors stops further JS from working
How to resend an Ajax request, after completing the previous one
Execute javascript code after AJAX request
ajax looping settimeout, new request only after previous request is completed
How to kill the previous ajax request in server side?
jQuery ajax request succeeding in console but callback isn't called
Related Tags