JavaScript Function Return Scope

Question

A function triggers a database call which returns some Json. This CID is then used to stamp the newly added DOM element.

I need to retrieve / return the value of "cid" which exists within ajax success block, it will be used to update attribute.

Error cid is not defined

//Save New Task
$("body").on('click','.icon-facetime-video',function(event){
  var new_entry = $(this).prev().val();
  var thebid = $(this).parents('tbody').prev().find('th').attr('id').split('_')[1];
  $(this).parent().addClass('tk').html('<i class="icon-eye-open"></i> '+new_entry);
  //CALL FUNCTION
  var cid = update_entry('new_tk',new_entry,thebid); //value of cid from update_entry
  $(this).parent().attr('id','cid_'+cid);
});

function update_entry(typeofupdate,new_entry,thebid){

  switch(typeofupdate){
    case 'new_tk': var action = 'new_tk';
    break;
  }

  $.ajax({
        type:'post',
        url: 'posts_in.php',
        dataType: "json",
        data: {cid : thebid, action: action, content: new_entry},
        success: function(data){
            var action = data[0],cid= data[1];
            console.dir(data);
        }
    });

  return cid;  
}

Ajax call is not synchronous so you sould wait until it returns that value. Yo might also want to write an `error:function()` there inside the call just in case. — inhan, May 21 '12 at 18:42
possible duplicate of [How can I return a value from an AJAX request?](http://stackoverflow.com/questions/2956261/how-can-i-return-a-value-from-an-ajax-request) — Phrogz, May 21 '12 at 18:43
possible duplicate of [Return result from nested asynchronous ajax call](http://stackoverflow.com/questions/10189367/return-result-from-nested-asynchronous-ajax-call) — Quentin, May 21 '12 at 18:43
See also [this question on meta](http://meta.stackexchange.com/questions/115193/canonical-ajax-is-asynchronous-answer) — Quentin, May 21 '12 at 18:44

Joseph Silber · Accepted Answer · 2012-05-22T00:34:29.150

Since AJAX is done asynchronously (hence the a in AJAX), your function returns before the AJAX call completes. You should pass a callback function into update_entry, and run it in your AJAX success handler:

var self = this;

update_entry('new_tk', new_entry, thebid, function(cid) {
    $(self).parent().attr('id', 'cid_' + cid);
});

function update_entry(typeofupdate, new_entry, thebid, callback) {

  switch(typeofupdate){
    case 'new_tk': var action = 'new_tk';
    break;
  }

  $.ajax({
        type:'post',
        url: 'posts_in.php',
        dataType: "json",
        data: {cid : thebid, action: action, content: new_entry},
        success: function(data){
            var action = data[0], cid= data[1];
            callback( cid );
            console.dir(data);
        }
    });
}

Thanks so much Joseph, this helps tremendously. :) – Codex73 May 21 '12 at 18:58 — Codex73, May 21 '12 at 18:58

JavaScript Function Return Scope

1 Answers1