Jquery form submit and ajax call overlapping. Ajax call canceled

Question

I have a web app where the user can create invoices. The application is based on jquery and ajax calls. The process flow to introduce the problem:

1. User fill in the invoice form. Tick a checkbox to create a PDF.
2. User clicks on the "Create invoice" button
3. The application insert the invoices' data to the database with an AJAX call
4. If the call returned successfully a FORM will be created with the invoices' data and it will be automatically submitted and than removed from the DOM. In this step the invoice will be created on the fly and the browser will start downloading the PDF.
5. In the meantime the last AJAX call (getDeliveries()...) removes the invoice form and reloads the starting screen.

The problem is that the last ajax call canceled (it can be seen in Chrome error console) and the screen will be blank. No results loaded and it is so frustrating. I think the problem is that the form submission and the ajax call is overlapping.

Do you have any idea how to solve this issue? Any other solution to force download the file (where I can waiting to start to call the getDeliveries function)?

Here is the js code what I created:

        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 call in getDeliveries function:

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

Answer 1

I think that your form submission is the problem. You can create a link with the url to access the resource that creates the pdf, trigger a click and them remove it.

Something like:

// 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/

Edit: To use POST, I think that this will help you. I found it here: Download File Using Javascript/jQuery