Using several functions and callbacks in JS

Question

I have this code that loads on document.ready and it checks if the user is logged in or not:

//Checking if the user is logged in or not
$(function(){
$.getJSON("inc/API.php", {command : "getUserName"},
    function(result){
        if(result==null){
            $("#divGreeting").html("Hello, guest!");
        }
        else {
            $("#divGreeting").html("Hello, "+result+"!");
            $("#divHeader").html("Hello, "+result+"! <a href='javascript:logout()'>Logout</a>");
        }
    });

});

If he's not - it says "Hello, guest"; if he is - it says "Hello, username", where username is the result in this function. What I need, is to make the username in this part: $("#divGreeting").html("Hello, "+result+"!"); to be a link, which leads to another page with userID, which I don't have. Like this: $("#divGreeting").html("Hello, <a href='userpage.html?userid="+HAVE TO GET THE ID HERE+"'>"+result+"</a>!");

I tried to use this function (it does get the:

function getUserID(){
    $.getJSON("inc/API.php",
    {
        command : "getUserID"
    },
    function(result){
        return result;
    });
}

and to call it like that: $("#divGreeting").html("Hello, <a href='userpage.html?userid="+getUserID()+"'>"+result+"</a>!");, but that didn't work, I didn't get any result, except for undefined (I understand it has something to do with asynchronous AJAX).

This is the content of API.php:

case "getUserID":
    echo getUserID();
    break;

it call's for function getUserID() from file BusinessLogic.php, which has this function:

function getUserID()
{
$arr = select("SELECT userID FROM users WHERE username='".$_SESSION["username"]."'");
return $arr[0]["userID"];
}

I've been told that I have to use callbacks, but I have no idea how to do that, how to write this callback. I'm lost here...

Some help, please?

DO NOT DO THIS with 3 requests. Just deliver the right HTML - you have the log-in-status at the server. No need to do 2 or more API queries on-load. — Bergi
– Bergi, Commented Apr 12, 2012 at 19:47
I agree about the 3 request, just one but I would return a JSON with the data I need so that the HTML stay on the client side instead of being generated by a server side script. — GillesC
– GillesC, Commented Apr 12, 2012 at 19:54
@Bergi I'm a beginner, I really don't know how to use what you just told... — Igal
– Igal, Commented Apr 12, 2012 at 19:57
@lgal: I mean't: Don't use any javascript for that. Serve all the information in your html. And if you really need to make it dynamic, build an api that allows retrieval of multiple values in 1 request. — Bergi
– Bergi, Commented Apr 12, 2012 at 20:13
@Bergi I agree, now I see the problem with getting only one value. It was some bad thing for the teacher to teach us. Oh well, I'll be smarter next time, this time I have to work with what I have... — Igal
– Igal, Commented Apr 12, 2012 at 20:26

js1568 · Accepted Answer · 2012-04-12 20:56:13Z

1

$.getJSON("inc/API.php", {command : "getUserID"}, function(result){
    var id = result;
    $.getJSON("inc/API.php", {command : "getUserName"}, function(result){
         $("#divGreeting").html("Hello, "+result+"!");
         $("#divHeader").html("Hello, <a href='userpage.html?userid="+id+"'>"+result+"</a>!");
    });
});

edited Apr 12, 2012 at 20:56

answered Apr 12, 2012 at 19:45

js1568

7,0322 gold badges30 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Igal Over a year ago

Tried it now, the link I got eventually looked like that: userpage.html?userid=[object Object]

js1568 Over a year ago

I've updated the code with the correct sequence of AJAX calls required.

Igal Over a year ago

Thank you very much! Just what I was looking for! Though I'm having some problems with displaying 'Hello guest' when the username == null, but I'll try to figure something out...

js1568 Over a year ago

Just put Hello, Guest in the HTML of #divGreeting. Then this function can overwrite it with the user's name. That way you can remove the if..else statement.

Bergi Over a year ago

And don't forget the onload-handler.

jbabey · Accepted Answer · 2012-04-12 19:47:23Z

0

The code that uses your ajax response

$("#divGreeting").html("Hello, <a href='userpage.html?userid="+getUserID()+"'>"+result+"</a>!");

Must be in the callback of the ajax function.

answered Apr 12, 2012 at 19:47

jbabey

46.7k12 gold badges73 silver badges94 bronze badges

1 Comment

Igal Over a year ago

Again, I have no idea in which callback to use it and how... I thought it's already in the callback the first function (the one that has command : "getUserName"...

GillesC · Accepted Answer · 2012-04-12 19:53:07Z

0

AJAX queries don't block the execution of a function, so when you call getUserID all it does it initialize the AJAX call and return undefined as no return was set. Adding return like suggested won't work either as all you will do is return something else, jQuery probably.

You have to fetch the id before you can generate anything. So when you ask for the username and you get one instead of displaying thing straight away you do your AJAX call to get the id and then the callback of that render your HTML.

answered Apr 12, 2012 at 19:53

GillesC

10.9k3 gold badges42 silver badges55 bronze badges

Comments

Jonny Burger · Accepted Answer · 2012-04-12 19:58:10Z

0

You are already using callbacks.

The $.getJSON syntax is:

jQuery.getJSON( url [, data] [callback] )

You have 5 { brackets in your code but only 4 } brackets. Maybe this is the error?
What do you see if you type yourdomain.com/INC/API.php?command=getUserName in your browser? If the document is empty, the error is in your PHP file, if the username appears, the problem is in your jQuery code.
You didn't tell us what happens if you execute the javascript code. What does appear? "Hello username", "Hello guest" or nothing?

answered Apr 12, 2012 at 19:58

Jonny Burger

9114 silver badges11 bronze badges

3 Comments

Igal Over a year ago

Counted the {} brackets - everything seems normal. Also, I work with Dreamweaver, it would've signaled me if I'd happen to miss a bracket. When I typed the URL you've mentioned I got the username of the logged in account, and when I was logged out i got null. If I'm logged in it says Heelo, username with actual username, not the word username; if I'm logged out it says Hello guest.

Jonny Burger Over a year ago

Isn't this what you wanted? So what is the problem if it works like it should?

Igal Over a year ago

No, not exactly - I needed to make the username to be a link, with userID value. I had troubles with getting the userID...

Collectives™ on Stack Overflow

Using several functions and callbacks in JS

4 Answers 4

5 Comments

1 Comment

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related