Ajax call does not assign a value in the done promise

Question

I have a method like this:

var isNameUnique = false;

function ValidateName() {

        var url = "/SomeRules/CheckIfNameExists/";

        var request = $.ajax({
            url: url,
            method: "GET",
            data: { sName: name},
            dataType: "JSON"
        });
        request.done(function (result) {
            if (result.doesNameExists) {
                alert("Name Already Exists!");
                console.log("Name Already Exists!");
            }
            else {
                isNameUnique = true;
                console.log("Name is unique!");
            }

        });

        request.fail(function (jqXHR, textStatus) {
            console.log(textStatus);
            alert("Request failed.");
        });

    console.log("Exiting ValidateName()");
}

This is called like so:

function CreateNewUser() {
    ValidateName();
    console.log(isNameUnique);
    if(isNameUnique){
     // do stuff
    }
}

When I run the application I have these in the console in this order:

Exiting ValidateName()
false
Name is unique!

When it's printing the 3rd console I expect 'isNameUnique' to be set to true. But that's not happening!!! What am I doing wrong?

Thanks in advance.

You mean that the `console.log` in your `createNewUser` should say `true`? That is not going to happen. That console.log gets triggered before your ajax call is done. — putvande, Jun 01 '15 at 10:30

score 0 · Accepted Answer · answered Jun 01 '15 at 10:32

0

By default every Ajax request is asynchronous, means code next to Ajax call will not wait for the completion of Ajax call. So what you need to do is, make your Ajax call synchronous, so that next lines of code will execute only after completion of ajax call.

To make your ajax call synchronous add following option in ajax Setting:

async : false

For more info check this documentation and read about async setting.

answered Jun 01 '15 at 10:32

Puneet

2,051
9
17

Puneet, using async:false results in this error 'Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.' – Codehelp Jun 01 '15 at 10:41

score 0 · Answer 2 · answered Jun 01 '15 at 10:33

0

That happens when you start using async. Your variable isNameUnique gets assign the value but long after you call console.log(isNameUnique);. The best way to tackle that is to make the function ValidateName returning a promise and chain on it.

answered Jun 01 '15 at 10:33

defectus

1,947
2
16
21

Or make the call synchronous as suggested by @puneet. – defectus Jun 01 '15 at 10:35

Ajax call does not assign a value in the done promise

2 Answers2