Passing global Javascript variables through callback functions to other JS files

Question

So I have an interesting problem. I declare a global variable before referencing other Javascript files, but the variable does not seem to carry through. Maybe I am missing a step somewhere?

The variable is a string that is the contents of an uploaded file like so:

function getText(s){ //creates a global variable that can hold the file
        window.text = s;
        console.log(window.text);
  };     
  function handleFileSelect(event) {
    var files = event.target.files; // The file that is uploaded
      var reader = new FileReader();                 
     reader.onloadend = function(event){            
        getText(event.target.result); //pulling out the content of the file
        loadScript('total.js',function(){ //starts app code
            window.text
        });
     };      
    reader.readAsText(files[0],"UTF-8");//required to read the text        
};           
  try{
        document.getElementById('files').addEventListener('change',
         handleFileSelect, false); //listens for the uploaded file
  }    
  catch(e){
        alert(e);
  };

So once a user uploads a file, the contents are copied into window.text like so. The contents are logged to ensure I caught the right thing. loadScript then allows for the rest of the app code to start running. I needed my program to wait for the user to specify a file before it could continue, and I had some weird quirks with AngularJS, so running it in this manner was the only workaround I could think of.

The contents of loadscript:

function loadScript(url, callback){

var script = document.createElement("script")
script.type = "text/javascript";

script.onload = function(){
    callback();
};

script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);

};

total.js begins with this line of code, which eventually leads to the output:

var csv=window.text;

Everything works. The output looks like it should...save for it's empty. Meaning window.text isn't pulling through correctly.

Is it due to the callback that it's not making it all the way through? How can I solve this?

Edit: The function from my callback simply isn't running at all, I've figured out, so it's not an issue of passing the variable through. But PHPglue's input is still valid. Thanks.

Maybe has something to do with this question? http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call — elclanrs, Jul 10 '13 at 22:07
is window.text always empty ? Or in the getText function ? Or in the file total.js ? Or in the callback ? — dievardump, Jul 10 '13 at 22:17

score 0 · Accepted Answer · answered Jul 10 '13 at 22:17

Instead of window.text, just declare your variable with, which I recommend, or without the var keyword, above all of your code, like:

var windowText;
function getText(s){
    windowText = s;
    console.log(windowText);
}

In JavaScript variables automatically carry down, if they are written above other code, unless they are scoped inside a function specifically. As long as you don't use the var keyword in your function code, you can reuse windowText.

Passing global Javascript variables through callback functions to other JS files

1 Answers1