how to print ajax response using jquery

Question

I have to make ajax calls in for loop. ajax gives me a text/html response. Now I have to print that each response. I am doing the below code:

function printBill(printBills, lastBillNo, type,taxType,outletId,date){

var printableObjects=[];
printBills.forEach(function(data){
    lastBillNo++;
    console.log(JSON.stringify(data));
    $.ajax({
        url: contextPath+"/print/"+lastBillNo+"/"+type+"/"+taxType+"/"+outletId+"/"+date,
        type: "POST",
        data: JSON.stringify(data),
        contentType: 'application/json',
        async:false,
        success:function(response){

            printableObjects.push(response);  // pushing response to array.

        }
    });
});
 return printableObjects;
}

This function gives me the printableObjects as array.. now I want to print the objects inside of this object array. To print this object I am using the below code:

function printIt(printableObj){
var counter = 0;
 var timer = setInterval(function(){
     printContent(printableObj[counter]);
    counter++;
    if (counter === printableObj.length) {
        console.log("clearing timer :"+counter+" length of the obj          :"+printableObj.length);
          clearInterval(timer);
         alert("Printing done ..");
          window.location.href="takeAway";

    }
},500);
console.log("============");
 return true;
}

function printContent(printDoc){
//console.log("Printing object is :"+el);
  var restorepage = document.body.innerHTML;
  var printcontent = printDoc;
  document.body.innerHTML = printcontent;
  window.print();
  document.body.innerHTML = restorepage;
}

I am sending this print to sendToOne note. Whenever printing is happening that time my browser got struck. Please let me know any solution. No luck with me.

What is it that is not working? is `printContent` not printing anything? Have you waited for the ajax completion _before_ trying to print? — tfrascaroli, Sep 23 '15 at 10:36
Move the ForEach loop on printableObjects inside the success. And no need to return printableObjects from printBill function. — Gagan Jaura, Sep 23 '15 at 10:45
the problem is browser is not responding after printing completed... — Nalla Srinivas, Sep 23 '15 at 11:02
@TIMINeutron printContent is printing. but in forloop i am print the printableObjects giving me the problem. i am waiting for the ajax response. — Nalla Srinivas, Sep 23 '15 at 11:19

score 0 · Answer 1 · answered Sep 23 '15 at 10:41

Try to move foreach loop after call is succedeed.

function printBill(printBills, lastBillNo, type,taxType,outletId,date){

 var printableObjects=[];
 printBills.forEach(function(data){
   lastBillNo++;
console.log(JSON.stringify(data));
 $.ajax({
    url: contextPath+"/print/"+lastBillNo+"/"+type+"/"+taxType+"/"+outletId+"/"+date,
    type: "POST",
    data: JSON.stringify(data),
    contentType: 'application/json',
    async:false,
    success:function(response){

        printableObjects.push(response);  // pushing response to array.
        printableObj.forEach(function(d){
       // setTimeout(printContent(d),1000);
       printContent(d);
});


    }
});
 });
   return printableObjects;
}

function printContent(printDoc){
//console.log("Printing object is :"+el);
 var restorepage = document.body.innerHTML;
 var printcontent = printDoc;
 document.body.innerHTML = printcontent;
 window.print();
 document.body.innerHTML = restorepage;
}

score 0 · Answer 2 · answered Sep 23 '15 at 11:36

If that is all your code, you're clearly not waiting for all the ajax's returns.

Try this sample (can't test right now, sorry)

function printBill(printBills, lastBillNo, type, taxType, outletId, date, callback){
    //We create a new array, which essentially stores all the calls to ajax
    //so we can listen to all their completions.
    var requests=[],
        printableObjects = [];
    printBills.forEach(function(data){
       lastBillNo++;
        console.log(JSON.stringify(data));
        requests.push($.ajax({
            url: contextPath+"/print/"+lastBillNo+"/"+type+"/"+taxType+"/"+outletId+"/"+date,
            type: "POST",
            data: JSON.stringify(data),
            contentType: 'application/json',
            async:false,
            success:function(response){

                printableObjects.push(response);  // pushing response to array.
            }
        }));
        //We use $.when() to check for all the ajax call's completions and
        //execute a function when they're all done. the fn.apply() is being
        //used to pass each item as an individual parameter. 
        $.when.apply($, requests).then(
            callback(printableObjects);
        );
   });
   return printableObjects;
}

And you use it like so:

printBill(printBills, lastBillNo, type, taxType, outletId, date, function (printableObjects) {
    //Do something with that array - printableObjects
}

More info on $.when() More info on apply()

how to print ajax response using jquery

2 Answers2