以下のコードセクションはすべて、ajax からデータをフィードしているテーブルを示しています。データは、動的に作成されたテーブル内のカスタムポップアップに表示されます。カスタムポップアップには、印刷ボタンをクリックすると印刷ボタンがあります。同じポップアップに表形式で表示されたajaxデータで満たされたテーブルを印刷したいです。私を助けてください。
function printPreview(i){
var id=i;
var flag=new Array();
if(checkstatus[i]=="B"){
send={address:'http://192.168.1.22:8082/oracledetail/test.php?result=8&table_code='+tableCode[i]}
$.ajax({
type:"POST",
url:"dummytest.php",
data:send,
success: function(data)
{
//alert(data);
//centering with css
centerPopup();
//load popup
loadPopup();
$('#popupContact').html("<a id='popupContactClose'>X</a><h1>Print Bill</h1>"+
"<center>"+
"<table id='printView' cellspacing='15px'>"+
"<tr class='rows'>"+
"<td><b><font size='+1'>Sr. No</font></b></td>"+
"<td><b><font size='+1'>Item Name</font></b></td>"+
"<td><b><font size='+1'>Quantity</font></b></td>"+
"<td><b><font size='+1'>Price/Item</font></b></td>"+
"<td><b><font size='+1' style='padding-left:10px;'>Qty*Price</font></b></td>"+
"</tr>"+
"</table>"+ "<br/> <input id='print' type='button' value='Print Bill' />" +
"</center>"
);
$("#popupContact").delegate('#print',"click",function(){
var tabcode=tableCode[id];
printBill(tabcode);
});
$("#popupContact").delegate('#popupContactClose',"click",function(){
disablePopup();
location.reload();
});
var total = 0;
var responseString=data.split(",");
var len= responseString.length;
for(var i=0;i<len-1;i++){
var orderDetails=responseString[i].split("~");
itemName[i]=orderDetails[0];
itemQuantity[i]=orderDetails[1];
priceperItem[i]=orderDetails[2];
itemtotalPrice[i]=orderDetails[3];
total += parseInt(itemtotalPrice[i]);
$('#printView').append("<tr class='rows'> <td class='srno'><font size='+1' style='text-align=center;'>"+(i+1)+"</font></td> <td class='itemname'><font size='+1'>"+itemName[i]+"</font></td> <td class='quantity'><font size='+1'>"+itemQuantity[i]+"</font></td> <td class='price'> <font size='+1'>"+priceperItem[i]+"</font></td> <td class='itemtotalprice'><font size='+1'>"+itemtotalPrice[i]+"</font></td> </tr>");
if(i==len-2){
$('#printView').append("<tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> <label> <h3 > Total Bill : "+ total +" </h3> </label>");
}
}//for ends.
}//function ends
}); //ajax ends
}//if ends
else{
$('#popupContact').html("<center><h2>Billing Request Not Yet Generated<h2></center>");
}
}//function ends..
これは、データを表示し、このカスタムでのみこのデータを印刷したい私のポップアップです:
実際に印刷をクリックすると、印刷用に以下のコードが実行されます。
$("#popupContact").delegate('#print',"click",function(){
var tabcode=tableCode[id];
printBill(tabcode);
var display_setting="toolbar=yes,location=no,directories=yes,menubar=yes,";
display_setting+="scrollbars=yes,width=750, height=600, left=100, top=25";
var content_innerhtml = document.getElementById("#printView").innerHTML;
var document_print=window.open("","",display_setting);
document_print.document.open();
document_print.document.write(content_innerhtml);
document_print.print();
document_print.document.close();
location.reload();
});
しかし、デバッグすると、次の行にエラーが表示されます。
line: --> `var content_innerhtml = document.getElementById("#printView").innerHTML;`
エラー: -->document.getElementById("#printView") が null です
さらに実行を停止しlocation.reload();
、ページを直接リロードします。
私を助けてください。