Javascript/jQuery returned value

I'm apparently missing something in the variable scope here.  I want the function checkcampaign("hello"); to return the value obtained via the Ajax .post.

function checkcampaign(uid) {
            var mycampaign = "";
            $.post( "campaigntest.php", { name: uid })
            .done(function( data ) {
                //console.log( data );
               mycampaign = data;
                console.log(mycampaign);
            })
            return( mycampaign );
        }
        
           console.log(checkcampaign("hello"));

Open in new window


In the ".done" portion - it returns the result. Apparently I'm missing something though - because the call console.log(checkcampaign("hello")); yields an empty string.

What is it I'm missing?  :)
LVL 2
erzoolanderAsked:
Who is Participating?
 
RobOwner (Aidellio)Commented:
You can also keep it asynchronous and provide your own callback:

function checkcampaign(uid, cb) {
            $.post( "campaigntest.php", { name: uid })
            .done(function( data ) {
                // pass the data to the callback and use the timeout to relinquish control flow
                setTimeout(function() {cb(data)},0);
            });
        }
        
           checkcampaign("hello", function(data) {
                 console.log(data);
});

Open in new window

0
 
Chris StanyonCommented:
This is a bit of a gotcha when using AJAX. AJAX, by it's nature is asynchronous, which means it happens in the background. That means that your return will be called before the AJAX has had time to complete. You need to set the AJAX call to be synchronous, which you can't do using the shortcut post() method. You'll need to write out your AJAX call in full, and set the async property to false:


var mycampaign = "";

$.ajax({
    url: "campaigntest.php",
    data: { name: uid},
    async: false
})
.done(function(data) {
    mycampaign = data;
});

return mycampaign;

Open in new window

0
 
Slick812Commented:
greetings erzoolander, , you use a code operation that has worked for you before, when you use functions, as you Return a value -
          return mycampaign;

but that variable mycampaign, is NEVER affected by your coding, , you are used to placing "Ordered" top to bottom code progressions and you think that this line -
    mycampaign = data;
should set that variable to use a a return, BUT because the Jquery uses the parentheses ( ) , there code is often "Reduced" in the length of written work, BUT if a method like done()  has a period in front -
     .done(function( data )
then that is a METHOD of something outside of the current code progression, although in Jquery it looks like it's in the function checkcampaign(uid) code progression, it is not.

you could also code it like -
var jqxhr = $.post( "campaigntest.php", { name: uid });
function checkcampaign(uid) {
            var mycampaign = "";
            var jqxhr =$.post( "campaigntest.php", { name: uid });
            
            return mycampaign;
        } // end of function checkcampaign

jqxhr.done(function( data ) {// done() is a method of the parent jqxhr
 //console.log( data );
 mycampaign = data; // Notice that this line in no longer in the above function
console.log(mycampaign);
 });

Open in new window


So when using AJAX you do not usually have any returned values in that function, if you do have a return from that function, it should not have any values in it you want to get from the server.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.