0

I have 2 method. second one calls the first one. When I put an alert function into the first one I can see the return value. But second function see the value as undefined. I couldnt understand why 2. one can't handle the value?

function getTweetReply(id_str) {
    $.getJSON("get_tweet_reply.php", {id_str: id_str}, function(json) {
      tweet_relpy = '<blockquote>'+json.results[0].text+'</blockquote>';
      alert(tweet_relpy); // --> I can see the result
      return tweet_relpy;
    });
}

$(document).on("click", ".tweet",function(){
    var id_str = $(this).attr("id");
    $.getJSON("get_tweet_details.php", {id_str: id_str},     function(json) {
        tweet = '<img src="'+json.results[0].profile_image_url+'"><br>\
                ' + json.results[0].from_user + '<br>\
                ' + json.results[0].from_user_name + '<br>\
                ' + getTweetReply(json.results[0].id_str) + '</b><br>'; // --> undefined
       $("#float").html('<div id="replybox">'+ tweet +'</div>');
    });
});
Xotic750
  • 22,914
  • 8
  • 57
  • 79
Ozan Dikerler
  • 55
  • 8
  • you may well be able to see the result, but that `return` value is getting ignored because the callback is called asynchronously via the event loop, and not via the original calling function. – Alnitak May 12 '13 at 13:49
  • Thanks but I couldnt find the answer here. I have 2 getJSON function. $(float).html must wait the first one in the getTweetReply – Ozan Dikerler May 12 '13 at 13:53
  • is the `id_str` sent in the "details" query the same ID as the one sent to the "get reply" query? – Alnitak May 12 '13 at 13:57
  • Some background reading that may help you: http://www.html5rocks.com/en/tutorials/async/deferred/ – Xotic750 May 12 '13 at 13:58

1 Answers1

1

First, separate your AJAX from your content generation, and expose promises:

function getTweetDetails(id_str) {
    return $.getJSON("get_tweet_details.php", {id_str: id_str});
}

function getTweetReply(id_str) {
    return $.getJSON("get_tweet_reply.php", {id_str: id_str});
}

function render(details, reply) {
    // render HTML based on "details" and "reply" JSON structures
    var tweet = '...';
    $("#float").html('<div id="replybox">'+ tweet +'</div>');
}

This is separation of concerns - the two AJAX related functions now don't need a callback parameter, the "promise" that's returned allows any number of callbacks to depend on the result, and also for error callbacks that aren't directly supported by $.getJSON() to work.

Then, since the second query depends on the first:

$(document).on("click", ".tweet", function() {
    var id_str = this.id; // not $(this).attr('id') !!
    getTweetDetails(id_str).done(function(details) {
        getTweetReply(details.results[0].id_str).done(function(reply) {
            render(details, reply);
        });
    });
});
Alnitak
  • 334,560
  • 70
  • 407
  • 495
  • Thank you very much Alnika. No first id is the original tweet's id, second one is the reply_tweet's id. previous answer which has the callback() function solved the problem – Ozan Dikerler May 12 '13 at 14:07
  • I have not used the render function before. I'll learn it now. thank you – Ozan Dikerler May 12 '13 at 14:08
  • @OzanDikerler the second block in my code works for the case where the reply ID depends on the first ID. You have to write the `render` function yourself. I was just trying to demonstrate how you can (and should) separate your AJAX functionality from the code that converts the result into HTML. – Alnitak May 12 '13 at 14:09
  • @OzanDikerler ok, I've made the answer slightly more complete - it should be more obvious what I'm proposing now – Alnitak May 12 '13 at 14:13
  • actually I liked your answer because it also made clear the synchronous stacking of done and the asynchronous use of when and done... even so it's a good to read example :) – metadings May 12 '13 at 14:15
  • @metadings I can't see the error you're referring to... Ah found it, thanks! The older `when` example wasn't relevant here, so I removed it. – Alnitak May 12 '13 at 14:20
  • yes this one is perfect. Now I can call getTweetReply as recursive. – Ozan Dikerler May 12 '13 at 14:23