Executing commands sequentially in Javascript

Question

I'd appreciate any suggestions to get this resolved.

I am using a JS function checkAvailability() to confirm if a group is available for addition to a database. (For some reasons, database key constraints were not applied) While doing this, sometimes my function returns even before receiving the output from the PHP file.

So I get a mixed result. When the output from PHP file is received, it shows the correct result. But rest of the times it just returns false.

Any pointers on how this can be fixed? The code follows:

Thanks, Vish

//function to check groupname availability

function checkAvailability(){
        var grpname = $('#groupname').val();
        var isAvailable = false 

        //use ajax to run the check
        $.post("checkGroupName.php", { gname: grpname },
            function(result){
                if(Number(result) == 0){
                    //show that the groupname is available
                    isAvailable = true ;
                    $('#username_availability_result').html(grpname + ' is Available');
                }
                else{
                    //show that the groupname is NOT available
                    isAvailable = false ;
                    $('#username_availability_result').html(grpname + ' is already taken');

                }
        });

    alert("isAvailable : "+isAvailable);
    return isAvailable ;
}

checkGroupName.php file

$gname = $_POST['gname'];
$query = "SELECT * FROM groups WHERE group_name='$gname'";
$result = mysql_query($query);
if(mysql_num_rows($result)){        
    echo 1; 
else
    echo 0;

I sure love being able to run an SQL injection attack on your application! — Delan Azabani
– Delan Azabani, Commented Jul 28, 2011 at 8:31
why don't you want compare result as string? if(result == '0'){... — heximal
– heximal, Commented Jul 28, 2011 at 8:34
user: Re @Delan's comment, it's a real issue you will want to deal with in your code. More: en.wikipedia.org/wiki/Sql_injection — T.J. Crowder
– T.J. Crowder, Commented Jul 28, 2011 at 8:37

T.J. Crowder · Accepted Answer · 2011-07-28 08:33:04Z

Your function should always be returning before your ajax request to the PHP page completes, because the ajax request is asynchronous. You start it in your function, but it completes after the network operations are done. .post doesn't block waiting for the result.

You can make it block by using .ajax rather than .post with the async: false option, but on many browsers that locks up the UI in an unpleasant way during the network request.

Instead, have your function accept a callback that it will call with the result of the operation:

function checkAvailability(callback) {
    var grpname = $('#groupname').val();

    //use ajax to run the check
    $.post("checkGroupName.php", { gname: grpname },
        function(result){
            if(Number(result) == 0){
                //show that the groupname is available
                $('#username_availability_result').html(grpname + ' is Available');
                callback(true);
            }
            else{
                //show that the groupname is NOT available
                $('#username_availability_result').html(grpname + ' is already taken');
                callback(false);
            }
    });
}

Code that used to do this:

doSomething();
if (checkAvailability()) {
    itsAvailableLetsDoSomething();
    moreAvailableStuff();
}
else {
    itsNotAvailableDoSomethingElse();
    otherStuff();
}

...would instead look like this:

doSomething();
checkAvailability(function(available) {
    if (available) {
        itsAvailableLetsDoSomething();
        moreAvailableStuff();
    }
    else {
        itsNotAvailableDoSomethingElse();
        otherStuff();
    }
});

As you can see, the impact is minimal, but by doing this you're taking advantage of asynchronous communication to keep your UI responsive.

Nicola Peluchetti · Accepted Answer · 2011-07-28 08:32:01Z

0

the problem is that $.post sends the request asynchronously and so the rest of the code is executed before the response arrives from the server.

the solution is to use $.ajax() and to set async option to false so that the call is synchronous. something like:

function checkAvailability(){
        var grpname = $('#groupname').val();
        var isAvailable = false 

        //use ajax to run the check
        $.ajax({
                type: 'post',
                url: 'checkGroupName.php',
                dataType: 'json',
                data:  { gname: grpname },
                async: false, 
                success: function(result){
                  if(Number(result) == 0){
                    //show that the groupname is available
                    isAvailable = true ;
                    $('#username_availability_result').html(grpname + ' is Available');
                }
                else{
                    //show that the groupname is NOT available
                    isAvailable = false ;
                    $('#username_availability_result').html(grpname + ' is already taken');

                }
        });

    alert("isAvailable : "+isAvailable);
    return isAvailable ;
}

answered Jul 28, 2011 at 8:32

Nicola Peluchetti

77k32 gold badges151 silver badges197 bronze badges

2 Comments

JJJ Over a year ago

Synchronous ajax calls should be the last resort when there are no other options. Almost always there are.

Nicola Peluchetti Over a year ago

I think it's correct to present all of the options. It all depends on the needs of the OP, i don't think my answer is incorrect, i think there are other options (which of course are better but needs more refactoring of the code).

Dhan · Accepted Answer · 2011-07-28 08:39:15Z

You can try this code

function checkAvailability(){

 var grpname = $('#groupname').val();
    var isAvailable = false 
    $.ajax({
        type: "POST",
        url: "checkGroupName.php",
        data: {grpname : grpname },
        success: function (result) { 
        if(Number(result) == 0){
                //show that the groupname is available
                isAvailable = true ;
                $('#username_availability_result').html(grpname + ' is Available');
            }
            else{
                //show that the groupname is NOT available
                isAvailable = false ;
                $('#username_availability_result').html(grpname + ' is already taken');

            }}
    });

}

Collectives™ on Stack Overflow

Executing commands sequentially in Javascript

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related