Reading files with jQuery?

Question

I would like to read a file (server-side) using jQuery. I have tried code supplied by multiple sites and it has not worked.

The code I tried last is:

jQuery.get("users/" + get("user") + "/display.txt", function(data) {
    fullName = data;
});

However the variable 'fullName' (which is previously declared in the code) comes out as 'undefined'. How can I get this to work?

EDIT: Full code (excluding CSS)

<!DOCTYPE html>
<html>
    <head>
        <title>Chat</title>
        <script src="jquery-1.11.3.min.js"></script>
        <script type="text/javascript">
            function get(variable) {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i=0;i<vars.length;i++) {
                    var pair = vars[i].split("=");
                    if(pair[0] == variable){return pair[1];}
                }
                return(false);
            }
            var fullName;
            var file = "users/" + get("user") + "/display.txt";
            jQuery.get(file, function(data) {
                fullName = data;
            });
        </script
    </head>
    <body bgcolor="#B2C2F0">
        <div class="window">
            <div class="rightCorner">
                <span><script type="text/javascript">document.write(fullName)</script></span>
            </div>
        </div>
    </body>
</html>

How are you trying to access the variable? It's an async call, so if its outside the callback, it won't work. — tymeJV, May 28 '15 at 20:52
What does "not work[ed]" mean? Where are you trying to read `fullName`? You're aware that this is AJAX and is therefore asynchronous, right? That means the AJAX request runs in the background and the rest of your code continues. `fullName` won't be set until the AJAX call is done at some point in the future. — gen_Eric, May 28 '15 at 20:53
if you debug the value of data in the same function scope, it have some value?, remember that ajax call are async — ecarrizo, May 28 '15 at 20:53
What if you try not using the shorthand get, and use $.ajax so you can tweak with the data type etc more easily. — Norman Cousineau, May 28 '15 at 20:57
possible duplicate of [Read/write to file using jQuery](http://stackoverflow.com/questions/582268/read-write-to-file-using-jquery) — ThaDick, May 28 '15 at 20:59
I'm very new to ajax and jQuery. When I say that I mean I literally started today. I do get an error in the console, it says that cross origin requests are only supported for protocol schemes. — Levi Meredith, May 28 '15 at 20:59
You can only use AJAX when your files are on a (local or remote) web server. Since you're just learning, you should learn the *correct* way. Don't use `document.write` ever. What you want to do is lose the `fullName` variable and in the callback for the AJAX call, use `$('.rightCorner')` and `.html(data)` to add the text to the DOM. — gen_Eric, May 28 '15 at 21:19

score 0 · Answer 1 · answered May 28 '15 at 21:00

You can't modify fullName var with data value inside that function and read it outside.
If you need to use that info outside the function, you need to export the data value within another function.

Something like:

var fullName = "not-set";
console.log('fullName is:', fullName); // not-set

function set_fullName( data ) {
    fullName = data;
    console.log('fullName is:', fullName); // must be `Levi` now
} 

jQuery.get("users/" + get("user") + "/display.txt", function(data) {
    set_fullName(data);
});

score 0 · Answer 2 · answered May 28 '15 at 21:01

You're probably just trying to access fullname before the ajax call finishes.

Try this:

var fullName = "";
function getUserName(username){
    jQuery.get("users/" + get("user") + "/display.txt", onGetComplete);
}
function onGetComplete(data){
    fullName = data;
    continueProgram();
}
function continueProgram(){
    console.log(fullName);
}

getUserName();

Reading files with jQuery?

2 Answers2