ユーザーが請求書を作成できる Web アプリがあります。アプリケーションは、jquery および ajax 呼び出しに基づいています。問題を導入するプロセス フロー:
- ユーザーが請求書フォームに入力します。チェックボックスをオンにして PDF を作成します。
- ユーザーが [請求書の作成] ボタンをクリックする
- アプリケーションは、AJAX 呼び出しを使用して請求書のデータをデータベースに挿入します。
- 呼び出しが正常に返されると、フォームが請求書のデータで作成され、自動的に送信され、DOM から削除されます。このステップでは、請求書がオンザフライで作成され、ブラウザーが PDF のダウンロードを開始します。
- その間、最後の AJAX 呼び出し (getDeliveries()...) によって請求書フォームが削除され、開始画面がリロードされます。
問題は、最後の ajax 呼び出しがキャンセルされ(Chrome エラー コンソールで確認できます)、画面が空白になることです。結果が読み込まれず、とてもイライラします。問題は、フォームの送信と ajax 呼び出しが重複していることだと思います。
この問題を解決する方法はありますか?ファイルを強制的にダウンロードする他の解決策はありますか (getDeliveries 関数の呼び出しを開始するのを待つことができます)。
私が作成したjsコードは次のとおりです。
var str = $("#invoiceForm").serialize();
$('#invoiceForm input[disabled], #invoiceForm select[disabled]').each( function() {
str = str + '&' + this.id + '=' + $(this).val();
});
//Save or update the invoice first
$.ajax({
type: "POST",
url: BASEURL+"productFuncs/setInvoice.php",
data: "f="+f+"&print=1&"+str,
success: function(data, textStatus){
$("#addAjax").hide();
$("#addButton").show();
if ( !isNaN( parseInt(data) ) ) {
//Print out
if ( $("#pdf").is(":checked") ) {
//Print out to PDF
var url = BASEURL+"productFuncs/getPrintOut.php";
var inputs = '<input type="hidden" name="f" value="'+ f +'" />' +
'<input type="hidden" name="pdf" value="1" />' +
'<input type="hidden" name="copy" value="2" />' +
'<input type="hidden" name="orig_id" value="'+ data +'" />';
$('#invoiceForm input[disabled], #invoiceForm select[disabled]').each( function() {
inputs+='<input type="hidden" name="'+ this.id +'" value="'+ $(this).val() +'" />';
});
var pairs = $("#invoiceForm").serializeArray();
$.each( pairs, function(i, field) {
inputs+='<input type="hidden" name="'+ field.name +'" value="'+ field.value +'" />';
});
//send request
$('<form action="'+ url +'" method="post">'+inputs+'</form>').appendTo('body').submit().remove();
}
else {
//Print out to HTML and directly to printer
$.ajax({
type: "POST",
url: BASEURL+"productFuncs/getPrintOut.php",
data: "f="+f+"©=2&orig_id="+data+"&"+str,
dataType: "html",
success: function(data, textStatus){
$("#printOut").html(data);
//Delay because of the IE
var t=setTimeout(' $("#printedArea").print() ', 3000);
}
});
}
$('#newDeliveryNote, #leftSide, #rightSide').toggle();
getDeliveries(f, '');
}
else {
//Not enough quantity - we have to set the ID nothing to save the delivery again
$('#invoiceForm input[name=id]').val("");
alert( data );
}
}
});
getDeliveries 関数での AJAX 呼び出し:
$.ajax({
type: "GET",
url: BASEURL+"productFuncs/getDeliveries.php",
data: "d="+d+"&f="+f,
success: function(data, textStatus){
$("#rightSide").html(data);
$("#cover").hide();
$("#ajaxMessage").fadeOut(200);
jsLink();
}
});