0

ユーザーが請求書を作成できる Web アプリがあります。アプリケーションは、jquery および 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 );
            }


        }
    });

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();       
        }
    });
4

1 に答える 1

1

フォームの提出が問題だと思います。URLを使用してリンクを作成し、PDFを作成するリソースにアクセスし、クリックをトリガーすると、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を使用するには、これが役立つと思います。私はここでそれを見つけました：Javascript/jQueryを使用してファイルをダウンロードする

于 2012-08-01T21:59:54.967 に答える