javascript function return problem

Sounds like this is doing access cross sites, e.g. another domain, port, ...
This is not allowed in browsers, when not specifically allowed by the server (see CORS)

Hi Steh. Thank you for your reply, but that's not the case: the script is in the same domain

In addition, notice that the function returns correct values and prints them in console. It's only from the code which calls the function that values are undefined...

The same result trying this:

jQuery('body').click(function(){
	pc_cards_number = getFolderCardsNumber('PC');
	sp_cards_number = getFolderCardsNumber('SP');
	console.log(pc_cards_number);
	console.log(sp_cards_number);
});

Select all Open in new window

I thought I had to wait for all other script execution end but that has nothing to do with this: page completely loaded, in console appear the two output produced internally by the funciton itself; if I click I get right result from within the function and undefined by the click event. Going crazy, here...

It looks like the click event calls the console.log() function before the function return the result...

I even tried to set a timeout this way, in order to delay the console.log() call:

jQuery('body').click(function(){
	pc_cards_number = getFolderCardsNumber('PC', 
 	    setTimeout(function(){
		   console.log(pc_cards_number);	
            }, 1000)
	);
	sp_cards_number = getFolderCardsNumber('SP', 
	    setTimeout(function(){
	           console.log(sp_cards_number);	
	    }, 1000)
     );
});

Select all Open in new window

Now the undefined are printed after the function has printed correct values... But they are still undefined!

Thank you Gregg. Yes, now I agree about that. Please, when you are on a computer can you give some guidance on promises? In the meanwhile I'll investigate by myself :-) Cheers

Another possibility is conflict (same variable name in local (within function) and global (with your page)

You may do explicit declaration in global (page scope).

Hi Pravin, thenk you for your reply but that is not the case. I learned soemthing about promises but... I can't test it now because the server has become suddenly unaccessible :-) Hope to work on tomorrow.
Cheers

Hi Marco,
your problem is due to the fact that the ajax call is asynchronous and the function exits before the result arrives.

To solve this you have two options, either pass a callback or use promises.

I'll post here the callback example because is the easiest to understand:

function getFolderCardsNumber(folder, callback) {
  jQuery.ajax({
    type: 'post',
    url: 'script.php',
    data: {
      folder: folder
    },
    success: function(result) {
      var response = JSON.parse(result);
      console.log('in folder ' + folder + ' there are ' + response + ' cards');
      
      // call the callback function passing the result
      if(callback){
      	callback(response);
      }
    },
    error: function(result) {
      console.log('error');
    }
  });
}


jQuery(document).ready(function() {
  var pc_cards_number, sp_cards_number;
  
  getFolderCardsNumber('PC', function(result){
  	pc_cards_number = result;
  	console.log('inner PC is ' + pc_cards_number);
  });
  
  getFolderCardsNumber('SP', function(result){
  	sp_cards_number = result;
  	console.log('inner SP is ' + sp_cards_number);
  });
});

Select all Open in new window

There's also the option to make the ajax call synchronous but I don't like to advise this because it will block the flow while the data is being fetched; resulting in a page hanging for the user.

Hi Alexandre, thanks for your reply. But the use of callback let me uncertain: for the moment I just have to put the returned value in a variable...

@Gregg: I tried to use promises and things seems to go better, but not clearly enough to me :-)

function getFolderCardsNumber(folder) {
	return Promise.resolve(jQuery.ajax({
		type: 'post',
		url: 'script.php',
		data: {folder: folder},
		success: function (result)
		{
			var response = JSON.parse(result);
			console.log(folder+' is '+response);
			return response;
		},
		error: function (result)
		{
			console.log('error');
		}
	})
	);
}

jQuery(document).ready(function ()
{
	var pc_cards_number, sp_cards_number;
	getLinkRequests('new_link_requests');
	
	var promise = getFolderCardsNumber('PC');
	promise.then(function(result){
		pc_cards_number = result;
		console.log('inner 1 is '+pc_cards_number);
	});
	console.log('inner 2 is  '+pc_cards_number);
	var promise = getFolderCardsNumber('SP');
	promise.then(function(result){
		sp_cards_number = result;
		console.log('inner 3 is  '+sp_cards_number);
	});
	console.log('inner 4 is '+sp_cards_number);
});

Select all Open in new window

The output is:

inner 2 is undefined
inner 4 is undefined
PC is 10 //printed internally by getFolderCardsNumber() function
inner 1 is 10
SP is 5 //printed internally by getFolderCardsNumber() function
inner 3 is 5

So it seems that I can't get a persistent value for my variables, that is a value which stays in variables outside some function. Probably this would be the result using Alexandre's suggestion using a callback function to printout values.

Probably, I can be happy with this solution (I have still to test in complete script) but I wouldlike to know what I'm missing here...

I'll post link to a new quesiton soon. Thank you!

Hi. Here's the link to the new related question: http://www.experts-exchange.com/questions/28923436/jQuery-promises-in-sequence.html