jQuery - call in function defined variable outside of this function

Question

I have this scenario:

$(document).ready(function(){
    $("#username-field").keyup(function(event) {
    data = [];
    data.push( $(this).val() );
        $.ajax({
            url: 'checkUsername.php',
            data: {data:JSON.stringify(data)},
            type: 'POST',
            dataType: "json",
            success: function (data) {
                var text = (data.error ? data.error : "");
            }
        });
    });
});

I need to call this variable outside of this function, e.g.:

$(document).ready(function(){
    $("#username-field").keyup(function(event) {
    data = [];
    data.push( $(this).val() );
        $.ajax({
            url: 'checkUsername.php',
            data: {data:JSON.stringify(data)},
            type: 'POST',
            dataType: "json",
            success: function (data) {
                var text = (data.error ? data.error : "");
            }
        });
            alert ( text )  // ADDED <--
    });
});

Does anybody know how to structure this jQuery, so i can call the variable later?

You need to read that link, as this is an exact duplicate. You're trying to use the returned content from the ajax call before the asynchronous ajax call has even completed. — adeneo, Dec 07 '13 at 12:42
@user2999787 it is an exact duplicate of the said issue... it clearly explains the problem and the solution... any answer here will not be a complete solution because it may not explain the solution that well — Arun P Johny, Dec 07 '13 at 12:49

score 1 · Accepted Answer · answered Dec 07 '13 at 12:46

Try $.Deferred:

$(document).ready(function(){
    $("#username-field").keyup(function(event) {
    var def = $.Deferred(); //Declare

    data = [];
    data.push( $(this).val() );
        $.ajax({
            url: 'checkUsername.php',
            data: {data:JSON.stringify(data)},
            type: 'POST',
            dataType: "json",
            success: function (data) {
                var text = (data.error ? data.error : "");

                def.resolve(text); //Resolve
            }
        });

        def.done(function(text){//Add handler
             alert(text);
        });

    });
});

yes thats what i thought about, great ! :D – user2999787 Dec 07 '13 at 12:50 — user2999787, Dec 07 '13 at 12:50

score 0 · Answer 2 · answered Dec 07 '13 at 12:47

Because the text is set in an async function you better use a callback. I.e. once the data is received and assigned you call another function and do whatever you need inside. Sure, you can do the same thing by defining a global text variable, but if you follow this approach you will not know when exactly the data is available.

$(document).ready(function(){
    $("#username-field").keyup(function(event) {
        data = [];
        data.push( $(this).val() );
        var dataIsHere = function(text) {
            data.push(text);
        }
        $.ajax({
            url: 'checkUsername.php',
            data: {data:JSON.stringify(data)},
            type: 'POST',
            dataType: "json",
            success: function (data) {
                var text = (data.error ? data.error : "");
                dataIsHere(text);
            }
        });
    });
});

score -1 · Answer 3 · answered Dec 07 '13 at 12:41

try declaring a global variable text outside the document.ready function, and then assign and use it inside

var text = "";
$(document).ready(function(){
$("#username-field").keyup(function(event) {
data = [];
data.push( $(this).val() );
    $.ajax({
        url: 'checkUsername.php',
        data: {data:JSON.stringify(data)},
        type: 'POST',
        dataType: "json",
        success: function (data) {
            text = (data.error ? data.error : "");
        }
    });
        alert ( text )  // ADDED <--
  });
});

in this case, alert is always an emtpy string, i tested, but thanks — user2999787, Dec 07 '13 at 12:47

jQuery - call in function defined variable outside of this function

3 Answers3