Parameter passing with Ajax (using deferred and promise) help needed

This is most likely a repeat question since it's a common problem for learners, but I just cant find a to-the-point working solution for the issue (I've been trying to get on top this for ages!):

This works because there's no Ajax:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
function first(){
var bbb;
var test = prompt("enter a number");    
    if(test == 6){
         bbb = true;    
         return bbb;
    } else {
        bbb = false;    
    }

}
function second(){
    if(first()){
        alert("returned true!!");
    } else {
        alert("returned false");    
    }
}

But I can't get this next piece of code to work, because the callback runs before the Ajax call is complete. I know deferred and promise are the modern way to sort callbacks like this, but after reading and watching TONS on the matter, I'm still missing some key logic or syntax and it just won't work for me.

Can someone help me get a working example of deferred in action with the following code? Then from there I'll be able to improve my learning about deferred, but currently I'm getting nowhere.

//-----------------------gets much more confusing with Ajax calls------------------

function firstAjax(){
    var check = prompt("number between 1 and 10 to send (6 should return true from PHP...)");
    $.post('remote.php',
        {
        check: check
        },function(data) {
        var returned = JSON.parse(data);
        if(returned == true) {
            alert(returned);
            return true;
        } else {
            alert(returned);
            return false;
        }
    });
}

function secondAjax(){
    if(firstAjax()){
        alert("successfull return");
    } else {
        alert("return failed"); //callback runs before the post returns...
    }
}

Buttons to activate the functions:

<button type="button" onClick="second()">Run Local Javascript only </button>
<button type="button" onClick="secondAjax()">Run Ajax call with param passing</button>

And this is 'remote.php': simple if input = 6 return true.

<?php
$check = $_POST['check'];
if($check == 6){
    echo json_encode(true);
} else {
    echo json_encode(false);
}
?>

Answers 1

  • You are doing a asynchronous requests and firstAjax() will return undefined before the response have been received.

    You need to define a callback function as a parameter in firstAjax(), and then call this function when the response have been received.

    function firstAjax(callback) {
      var check = prompt("number between 1 and 10 to send (6 should return true from PHP...)");
      $.post('remote',
        {check: check}, 
        function (data) {
          var returned = JSON.parse(data);
            if (returned == true) {
              alert(returned);
              callback(true);
            } else{
              alert(returned);
              callback(false);
            }
        });
    }
    
    function secondAjax() {
      firstAjax(function(result){
        if(result){
          alert("successfull return");
        }else{
          alert("return failed");
        }
      });
    }
    

Related Articles