How do I expose feedback data?

Thunder_X · Post by **Thunder_X** » Thu Nov 21, 2013 7:36 pm

Hey gang!

Look at this snippet, please..

<script>
	var aValue
	
	function dothis()
	{
         getID("peter","pan");
         console.log(aValue);	// "undefined"
        }
	
	function getID(a,b)
	{
	$.post('getID.php', {aname: a, apass: b},
	function (fbdata)
		{
			aValue = fbdata;
                         console.log(aValue);	// data as from the PHP script, so, that works...
		}
	);				
	}
</script>

The JS function doThis() is called upon the load from a <body> tag, it in turn calls the getID() function, and AJAX call to a PHP script on the server. Though the variable aValue is declared globally, it comes back as undefined. How do I expose the results from the call-back function un the $.post call?
PLease consider I'm learningt he ropes here...
Thank you for a reply...
Thunder

Post by **hallsofvallhalla** » Thu Nov 21, 2013 10:19 pm

It should be undefined as at that moment you never gave it a value. Javascript will return Undefined even if you create the variable but never give it a value.

try

Code: Select all

<script>
   var aValue = "Test";
   
   function dothis()

and see what happens.

Ark · Post by **Ark** » Thu Nov 21, 2013 10:20 pm

That value is undefined because when you make an AJAX call it's an asynchronous call. Meaning that it will perform in the background, while your script is still running normally. So that's why it first logs undefined, and then when the AJAX call has finished your callback function is called modifying aValue.

Hope that made sense.

Post by **Jackolantern** » Thu Nov 21, 2013 11:28 pm

Ark wrote:That value is undefined because when you make an AJAX call it's an asynchronous call. Meaning that it will perform in the background, while your script is still running normally. So that's why it first logs undefined, and then when the AJAX call has finished your callback function is called modifying aValue.

Hope that made sense.

This is correct. At the $.post() call, the single-thread of JS execution immediately goes back to finish more code while the AJAX call awaits a response to run its callback (the callback that actually sets aValue), so it runs the console.log(aValue) statement, at which point it is undefined. At some point after that (a few milliseconds later), the AJAX response is received and then aValue is set, but it is too late. This is how you would need to structure this to work asynchronously:

Code: Select all

<script>
   var aValue;
   
   function dothis()
   {
         getID("peter","pan");         
    }
   
   function getID(a,b)
   {
   $.post('getID.php', {aname: a, apass: b},
   function (fbdata)
      {
         aValue = fbdata;
         console.log(aValue);   // data as from the PHP script, so, that works...
      }
   );            
   }
</script>

You already had a console.log() call inside the callback of the $.post call, so I just removed the console.log that was in the wrong place.

In asynchronous programming, you have to put all the code that relies on the result of an asynchronous method call inside the asynchronous method's callback. Otherwise the code that is relying on this result will run a split second after the asynchronous call is made, but before the results are returned back. Take a look at this psuedocode:

Code: Select all

var health = 100;
ascycHealthUpdate(function(newHealth){
    health = newHealth;
});
console.log(health);

Although the asyncHealthUpdate function is returning an update for health, that isn't what will be printed out to the console. The function to get the updated health will be fired off, but before the results return, 100 will be logged to the console. The code instead would need to be written like this:

Code: Select all

var health = 100;
ascycHealthUpdate(function(newHealth){
    health = newHealth;
    console.log(health);
});

You can also use methods to keep from having to repeat blocks of code when you need different paths through the code, etc:

Code: Select all

var printHealth = function(sHealth) {
    console.log(sHealth);
};

var health = 100;
ascycHealthUpdate(function(newHealth){
    printHealth(newHealth);   
});

Of course, printing the health in this case was trivial, but I used methods all the time to "finish-off" async callbacks.

Really getting the hang of asynchronous programming takes a while. Often in client-side Javascript, it isn't much of an issue, and many devs can code fine in it for months or even years without understanding it. If you ever learn an exclusively asynchronous platform that requires tons of concurrency, such as Node.js, it is always right in your face. That really forces you to learn patterns for asynchronous programming

Thunder_X · Post by **Thunder_X** » Thu Nov 21, 2013 11:54 pm

thanks to all! this makes sense! the AJAX works async, and the script is too fast to grab the result, and does'nt get a chance to "define" the variable...
I should set the call to async...
Actually, I've read that AJAX calls are "monitored" - I have to look into that...
Thanks!
Thunder...

Thunder_X · Post by **Thunder_X** » Fri Nov 22, 2013 1:26 pm

It worked! setting the call

Code: Select all

async : false

and setting up a

Code: Select all

success: function(data)

allowed me to expose the data...
Next step; arrays, or maybe (dare I dream.) JSON...

edit: oh f** waw!

Owkay, so, I call a PHP script in the back ground (AJAX, love it!) and upon exit, I echo the data, it's an array, so JSON is called for:

Code: Select all

echo json_encode($arrData);

Of course, on the client side, AJAX it patiently (at last) waiting, in comes the data, to be parsed:

Code: Select all

theList = JSON.parse(datafrom the server);

and the rest:

Code: Select all

itm1 = datafromtheserver[1]..

.

Ow yea'.. NOW...I can get a great weekend, thanks for all that helped!

Post by **Jackolantern** » Fri Nov 22, 2013 6:44 pm

I would not suggest to start making synchronous (as in async: false) AJAX calls simply to avoid structuring asynchronous code. Any latency in the network will freeze your entire JS script until the call returns.

Thunder_X · Post by **Thunder_X** » Fri Nov 22, 2013 6:48 pm

You are right, during the run of the application, background calls are to be made to the server to get new data as the old(er) data is being displayed. Of course, during login, there is not a lot more to be done but wait for the customer's ID to come back...
Once all that core data is in, the calls are to be made async of course...

Post by **Jackolantern** » Fri Nov 22, 2013 11:45 pm

Oh ok, I was assuming logins and things like that would be done through page postbacks. Although I was working on a SPA MUD game, and had a websocket-based login on one page, so you can definitely go that way

Thunder_X · Post by **Thunder_X** » Mon Nov 25, 2013 7:50 pm

Hmm, yes, though my current (still expanding) experience did'nt see that "far" yet

I'll try to keep as much as possible contained in one page with linkes JavaScript files split up inot logical functionality...such as the ones that do the general calculations, set up an object to represent the player/visitor (yes, I learned OOP in JS, innit cool?)
I'm still a huge leap away, but I'm in it for the fun, not so mucht the deadline

How do I expose feedback data?

How do I expose feedback data?

Re: How do I expose feedback data?

Re: How do I expose feedback data?

Re: How do I expose feedback data?

Re: How do I expose feedback data?

Re: How do I expose feedback data?

Re: How do I expose feedback data?

Re: How do I expose feedback data?

Re: How do I expose feedback data?

Re: How do I expose feedback data?