Unexpected JavaScript Actions reported by my Users

Question

Hello all,

My users keep complaining that a link does not show up for them. For me, I have tested this on several browsers and it works for me.

What should happen is that a process is started via AJAX using JQuery and once that is done I keep checking with the server via AJAX how much of the process has been done and once the process is complete I show them a link. But a lot of users tell me that it shows them the link and it quickly disappears back to showing 100.0%!

I can't see how I can fix this and I was hoping you guys could help me write something fool proof so that the link is always shown!

Here is the code concerned (its been shortened).

var startTime;
var continueTime;
var done = false;
function convertNow(validURL){
       startTime = setTimeout('getStatus();', 6000); 
       $.ajax({
       type: "GET",
       url: "main.php",
       data: 'url=' + validURL + '&filename=' + fileNameTxt,
       success: function(msg){
      done = true;    
      $("#loading").hide("slow");
      $("#done").html("LINK SHOWN HERE");   
       }//function

     });//ajax

}//function convertNow
function getStatus()
{    
     if(done==false){   
     $.ajax({
     type: "POST",
     url: "fileReader.php",
     data: 'textFile=' + fileNameTxt,
     success: function(respomse){
     textFileResponse = respomse.split(" ");
     $("#done").html("PROGRESS SHOWN HERE IN PERCENTAGES");
     }
     });//ajax
     continueTime = setTimeout('getStatus();', 3000); 
     }
}

Thanks all

P.S. I have this question before and was given an idea of using a conditional in the function but that didn't work when it should have!!

UPDATE

I have some of my users what OS and browsers they are using and they usually say a Mac Os and firefox or safari. Not sure if that help with the solution.

Answer 1

The behaviour described by the users suggests that the success callback of your getStatus function is called after the one in convertNow. You should test done variable in this callback

function getStatus(){
    if(done==false){
        $.ajax({
            type: "POST",
            url: "fileReader.php",
            data: 'textFile=' + fileNameTxt,
            success: function(respomse){
                // FIX : Already done, just ignore this callback
                if (done) return;

                textFileResponse = respomse.split(" ");
                $("#done").html("PROGRESS SHOWN HERE IN PERCENTAGES");

                // BONUS : call getStatus only when previous ajax call is finished
                continueTime = setTimeout('getStatus();', 3000);
            }
        });//ajax
    }
}

EDIT : This solution should prevent the bug from appearing most of the time, but there is still a chance. The only way to be sure is to remove the callback from convertNow and let the one in getStatus set the link when the processing is done (don't forget to allow only one call to getStatus at a time, see "BONUS" modification above).

Answer 2

If done is never set back to false then the reported behavior would be expected upon the second call to convertNow.

Since the ajax call in convertNow uses GET instead of POST, it is possible that a browser is returning a cached result whenever parameters are identical to a previous call.