我有一個Web應用程序,用戶可以在其中創建發票。該應用程序基於jquery和ajax調用。處理流程引入問題:jquery表單提交和ajax調用重疊。 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);
}
}
});
AJAX調用在getDeliveries功能:
$.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();
}
});
爲什麼你需要創建這個表單?你不能只在一個新窗口中發送這個請求嗎?創建一個鏈接,用戶點擊(或自動觸發與jQuery)下載PDF? – davidbuzatto 2012-08-01 21:46:37
因爲我不保存PDF到服務器。我可以強制瀏覽器以這種方式下載PDF。 Google搜索了很多,但沒有找到其他解決方案。該解決方案來自Filament Groups的網站。 – Tamas 2012-08-01 21:57:54