Question

im working on an HTML5 project that uses multiple canvases,
after the user finishes drawing using the canvas i save them as images to the server.
this is what i have:

        function saveViaAJAX()
        {
      $("#dvloader").show();
       document.getElementById("search-result").innerHTML="saving first image...";

        var saveCanvasFront = document.getElementById("collage-front");
        var canvasDataFront = saveCanvasFront.toDataURL("image/png");
        var postDataFront = "canvasData="+canvasDataFront;
        var debugConsole= document.getElementById("search-result");

        var saveCanvasBack = document.getElementById("collage-back");
        var canvasDataBack = saveCanvasBack.toDataURL("image/png");
        var postDataBack = "canvasData="+canvasDataBack;

        var ajax = new XMLHttpRequest();
        ajax.open("POST",'index.php?option=com_canvas&format=raw&task=savecanvas',true);
        ajax.setRequestHeader('Content-Type', 'canvas/upload');

        var ajax2 = new XMLHttpRequest();
        ajax2.open("POST",'index.php?option=com_canvas&format=raw&task=savecanvas',true);
        ajax2.setRequestHeader('Content-Type', 'canvas/upload');    



       ajax.onreadystatechange=function()
        {
            if (ajax.readyState == 4)
                {
              document.getElementById("search-result").innerHTML="saving second image..";
            ajax2.send(postDataBack);
             }
        }

       ajax2.onreadystatechange=function()
       {
        if (ajax2.readyState == 4)
         {

        document.getElementById("search-result").innerHTML="canvases saved successfully";
        setTimeout('top.location.href="index.php"', 4000)
            $("#dvloader").hide();

         }
       }    

       ajax.send(postDataFront);
        }

im sure there is a more elegant way to achieve this. i just want to make sure both requests are successful.this is why im calling them serially, one after the other.
is this correct ?
Thanks

Answer 1

this worked for me

// JavaScript Document

function saveViaAJAX()
{   
      if(some condition){
              alert("false");
              return false;
          } else {
                    if (confirm('confirm')) {
                    callAjax(); 
                    }
         } 

}

function callAjax(){
            document.getElementById("process").innerHTML="processing...";
            ajax0();
}

function ajax0()
{

    var postData = "";
    var ajax = new XMLHttpRequest();
    ajax.open("POST",'index.php?....',true);    
    ajax.setRequestHeader('Content-Type', 'canvas/upload');

    ajax.onreadystatechange=function()
    {
        if (ajax.readyState == 4)
        {   
            document.getElementById("process").innerHTML="next process...";
            ajax1();

        }
    }       

    ajax.send(postData);    

}

function ajax1()
{

    var ajax = new XMLHttpRequest();
    ajax.open("POST",'index.php?...',true);
    ajax.setRequestHeader('Content-Type', 'canvas/upload');

    ajax.onreadystatechange=function()
    {
        if (ajax.readyState == 4)
        {   
        if (ajax.status==403){

            document.getElementById("process").innerHTML="error: " + ajax.status + " retry...";
            setTimeout( ajax1(), 3000 );

          } else if (ajax.status==200 || window.location.href.indexOf("http")==-1 || ajax.responseText != 'failed'){

            document.getElementById("process").innerHTML="processing...";
            ajax2();
          } else {
            document.getElementById("process").innerHTML="error: " + ajax.status;
          }

        }
    }       

    ajax.send(postData);    

}

function ajax2()
{
    var canvasData = saveCanvas.toDataURL("image/png");
    var postData = "canvasData="+canvasData;

    var ajax = new XMLHttpRequest();
    ajax.open("POST",'index.php?...',true);
    ajax.setRequestHeader('Content-Type', 'canvas/upload'); 

    ajax.onreadystatechange=function()
    {
        if (ajax.readyState == 4)
        {   
        if (ajax.status==403){

            document.getElementById("search-result").innerHTML="error: " + ajax.status + " retrying...";
            setTimeout( ajax2(), 3000 );

          } else if (ajax.status==200 || window.location.href.indexOf("http")==-1 || ajax.responseText != 'failed'){
               document.getElementById("search-result").innerHTML="processing....";
               ajax3();
            } else {
               document.getElementById("search-result").innerHTML="error: " + ajax.status;
            }

        }
    }       

    ajax.send(postData);

}



function ajax3()
{

    var postData = "";
    var ajax = new XMLHttpRequest();
    ajax.open("POST",'index.php?...',true);
    ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 

    ajax.onreadystatechange=function()
    {
        if (ajax.readyState == 4)
        {   

             if (ajax.status==403){

            document.getElementById("search-result").innerHTML="error: " + ajax.status +
            " retrying...";
            setTimeout( ajax3(), 3000 );

             } else if (ajax.status==200 || window.location.href.indexOf("http")==-1 || ajax.responseText != 'failed'){
              document.getElementById("process").innerHTML="success";
              }
              else{
               document.getElementById("process").innerHTML="error:" + ajax.status ;
              }         

        }
    }       

    ajax.send(postData);

}