Problem Using Nested Ajax Call

Problem Using Nested Ajax Call

Hi All,

Greetings. I have application in which i am fetching bulk of data using ajax and json(dataType format).The problem is before success function gets completed and ajax call is made.Is there mechanism to queque it up or something. i am attaching code snippet with this kindly help me out.


Function : 1
function createPrDetails(workflows)
{
    var output="";
    output+="<div class='headerAccordion' >";
    $.each(workflows,function(i,workflow)
    {

        output+="<h1  id='"+workflow.docNo+"'>";
        output+="<a>Purchase Requisition :<font class='data'><b>"+workflow.docNo+"</b></font> of amount  <font class='data'><b>"+workflow.targetValue+" "+workflow.currency+"</b></font></a>";
        output+="<img  id='http://localhost:8080/MWorkflow_Modularised/"+workflow.approveUrl+"' class='approve_link' src='images/approve.png' width=18 height=18 alt='approve_"+workflow.docNo+"'>";
        output+="<img  id='http://localhost:8080/MWorkflow_Modularised/"+workflow.rejectUrl+"' class='reject_link' src='images/reject.png' width=18 height=18>";
        output+="</h1>";
        output+="<div class='workflowDetail' id='workflowDetail_"+workflow.docNo+"'>";
        output+="<img src='images/loader2.gif' style='margin-left:40%;align:center'/>";
        output+="</div>";
        getPrItemDetails(workflow.docNo,workflow.currency);
    });
    output+="</div>";
    output+="<div id='dialog-confirm' title='Purchase Order Approval' style='display:none'>";
    output+="<p><span class='ui-icon ui-icon-alert' style='float:left; margin:0 7px 20px 0;height:auto;'></span>Do you really want to approve?</p>";
    output+="</div>";
    output+="<div id='dialog-reject' title='Purchase Order Rejection' style='display:none'>";
    output+="<p><span class='ui-icon ui-icon-alert' style='float:left; margin:0 7px 20px 0;height:auto;'></span>Do you really want to reject?</p>";
    output+="</div>";

    document.getElementById("content_middle").innerHTML=output;

    $(".headerAccordion").accordion({
        collapsible:true,
        active:-1,
        autoHeight:false,
        icons : false
    });


}

Function :2
function getPrItemDetails(docNo,currency)
{
    sourceUrl="http://localhost:8080/MWorkflow_Modularised/my-inbox.jsp?docType=PR&docNo="+docNo+"&opt=details";
    var data="";
    $.ajax({
        url:sourceUrl,
        dataType:'json',
        success: function(itemWorkflows)
        {

            data+="<div class='itemAccordion'>";
            $.each(itemWorkflows,function(i,itemWorkflow)
            {

                alert(itemWorkflow.docNo+" "+itemWorkflow.itemNo+" "+itemWorkflow.material+" "+itemWorkflow.unit);
               data+="<h1 id='itemWorkflow_"+itemWorkflow.docNo+"'>";
                data+="<a>Line Item <font class='data'><b>"+itemWorkflow.itemNo+"</b></font>";
                if(itemWorkflow.material!="")
                    data+=" of material<font class='data'><b> "+itemWorkflow.material+"</b></font>,"
                data+=" Quantity<font class='data'><b> "+itemWorkflow.quantity+" "+itemWorkflow.unit+"</b></font> of Amount <font class='data'><b>"+itemWorkflow.amount+" "+currency+"</b></font> ";
                data+="</a></h1>";
                data+="<div class='itemWorkflowDetail' id='itemDetail_"+itemWorkflow.docNo+"'>";
                data+="Material : "+itemWorkflow.material+" , Description :  "+itemWorkflow.description+" ,Unit "+itemWorkflow.unit+"<br/>";
                data+="</div>";
               
            });
            data+="</div>";
            alert(docNo);
            document.getElementById("workflowDetail_"+docNo).innerHTML=data;
            $(".itemAccordion").accordion({
                collapsible:true,
                active:-1,
                autoHeight:false,
                icons : false
            });
               
        }
    });
}


Thanx in advance