ajax jquery needs one click more

Question

I have two php files,

1. say xyz.php

Code is :-

<?php

echo "hello";

?>

2.say abc.php

Code is :-

---

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){

    $("div.click_me").live('click',function(){


    $.ajax({

        type:"POST",
        data:null,
        url:"xyz.php",
        success:function(response){

        alert(response);    

        }

    })


    });



});




</script>


<div class="click_me"> CLICK </div>

---

On simply clicking div "click_me", a popup box appears saying "hello" as expected.

But problem lies here if I change its code to -:

---

<script type="text/javascript">
$(document).ready(function(){

    $("div.click_me").live('click',function(){

        res=xxx();

        alert(res)

    });



});

function xxx(){


    $.ajax({

        type:"POST",
        data:null,
        url:"xyz.php",
        success:function(response){

            res=response;

        }

    })

    return res;

}


</script>

---

NOW I HAVE TO CLICK TWICE TO GET THE POPUP BOX SAYING "hello". Nothing happens on clicking once. I am really confused about this stupid problem. Kindly help me . Thanx a lot.

Answer 1

In your xxx() version, res is not defined outside of the ajax call. So on the first click, your code dies with an "unknown variable" error (check your JS console). After the AJAX call returns, then res gets set to the response, and on your next click, the return works as expected.

Answer 2

Guyx, what is wrong in his code. I mean, success call bac should be executed after $.ajax is over, But before returning 'res'. For example, in this following code, Its alerting "abc" before alerting "xyz".

$(document).ready(function(){
    $("div.click_me").live('click',function(){
        res=xxx();
        alert(res)
    });
});
function xxx(){
    $.ajax({
        type:"POST",
        data:null,
        url:"xyz.php",
        success:function(response){
            res=response;
            alert("abc");
        }
    })
    alert("xyz");
    return res;
}

Answer 3

Ajax is asynchronous.

The success callback sets res to response after xxx has returned res. That means the first time that this code runs:

res = xxx();
alert(res);

res is undefined.

Also, read up on the var statement.

---

Solution: pass a callback function to xxx:

$('div.click_me').live('click',function()
{
    function alertCallback(x)
    {
        alert(x);
    }

    xxx(alertCallback);
});

function xxx(callback)
{
    $.post('xyz.php', null, function (result)
    {
        callback(result);
    });
}

Answer 4

Typically with an asynchronous call you would use a callback (success). If you want your function to return the result use the following in your Ajax options object:

async:false

I would recommend the following:

function xxx(callback){
    $.ajax({
        type:"POST",
        data:null,
        url:"xyz.php",
        success:function(response){
           callback(response);
        }
    })
    return res;
}

Answer 5

ajax is asynchronous so

return res;

is called before it's set

Answer 6

AJAX is asynchronous (that's the first A). This means that the result is not returned immediately. The success function fires when the response to the request is returned. You cannot return this response from your function as it has not come in yet at the time your function completes execution.

If you absolutely have to block and wait for the response, you can set the async parameter to false. This will force the call to wait for a response. This is generally a bad idea so you probably want to consider if there's some way for you to get the same functionality using the asynchronous behavior. Using async: false will hang the browser while it waits for the response. If this response takes some time to come back, it will be a very bad user experience in most cases.