Как выполнить AJAX-запрос после выполнения предыдущего AJAX-запроса на печать через термопечать

Question

У меня проблемы с запросом AJAX. Как сказано в заголовке, я хочу выполнить запрос AJAX после выполнения предыдущего AJAX для печати через термопринтер.

Пока у меня есть несколько кнопок с 3 разными идентификаторами. Каждый идентификатор будет выполнять запрос AJAX, чтобы запросить обновление в базе данных, и оно выполнено успешно. Но затем я хочу выполнить еще один AJAX-запрос на печать через термопринтер (QPOS Q58M) через escpos-php . Результат - успех, но печать не сделана. Затем я попытался выполнить сценарий печати без AJAX, и это удалось.

Вот вид 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>

А вот и скрипт для вызова запроса

<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

Что ж, я попытался создать новую кнопку для печати, чтобы она не выполняла вложенный AJAX-запрос, но, к сожалению, все еще не справилась с задачей ... Вот мое последнее изменение

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");
                }

            });
        })
    });

все еще не может печатать, но AJAX отвечает на это как успешный

UPDATE

Для документации я поставил скрипт печати ниже

<?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';
?>

Answer 1

В вашем коде js есть ошибки.Проверьте ниже код ..

<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>

Answer 2

Вы должны попытаться использовать функции обещаний и обратного вызова, как в примере выше:

    //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);
  })

Надеюсь, это поможет =)

Answer 3

Сначала извините, это ошибка из моего кода print.php ...

Я пытался запустить этот скрипт без AJAX и обнаружил ошибку, которая не может найти файл

require 'pengunjung/vendor/autoload.php';

Так что я полагаю, что это небольшая ошибка, и я изменяю ее на

require '../../vendor/autoload.php';
// you should know where this file located

И это работает!

Еще раз прошу прощения ...