2012-08-01 141 views
0

我有一個Web應用程序,用戶可以在其中創建發票。該應用程序基於jquery和ajax調用。處理流程引入問題:jquery表單提交和ajax調用重疊。 Ajax呼叫取消

  1. 用戶填寫發票表單。勾選複選框以創建PDF。
  2. 用戶點擊「創建發票」按鈕
  3. 應用程序與AJAX調用
  4. 數據到數據庫中。如果調用返回成功一個表格會在發票中創建插入發票數據,它會自動提交併從DOM中刪除。在這一步中,發票將被即時創建,瀏覽器將開始下載PDF。
  5. 與此同時,最後一次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+"&copy=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();  
     } 
    }); 
+0

爲什麼你需要創建這個表單?你不能只在一個新窗口中發送這個請求嗎?創建一個鏈接,用戶點擊(或自動觸發與jQuery)下載PDF? – davidbuzatto 2012-08-01 21:46:37

+0

因爲我不保存PDF到服務器。我可以強制瀏覽器以這種方式下載PDF。 Google搜索了很多,但沒有找到其他解決方案。該解決方案來自Filament Groups的網站。 – Tamas 2012-08-01 21:57:54

回答

1

我認爲你的表單提交的問題。您可以創建一個鏈接與網址訪問創建PDF的資源,觸發點擊,並將其刪除。

喜歡的東西:

// of course, you will change href to the url that will be used to generate the pdf 
$("body").append("<a id='downloadLink' href='www.stackoverflow.com' target='_blank'></a>"); 
$("#downloadLink")[0].click(); 
$("#downloadLink").remove(); 

的jsfiddle:http://jsfiddle.net/davidbuzatto/QGs5n/

編輯:使用POST,我認爲this會幫助你。我在這裏找到了:Download File Using Javascript/jQuery

+0

看起來很有前途!但是由於表單中的大量數據,我需要POST方法。你對POST方法有任何想法嗎? – Tamas 2012-08-01 22:06:21

+0

我想我找到了一個做這項工作的jQuery插件。我張貼在我的答案。 – davidbuzatto 2012-08-01 22:11:48

+0

我更新了項目主頁的鏈接。 – davidbuzatto 2012-08-01 22:16:23