CODEWITHSUNDEEP
javascriptjqueryajaxcallback
Igal
Igal

Reputation: 6083

Using several functions and callbacks in JS

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?

Upvotes: 0

Views: 96

Answers (4)

js1568
js1568

Reputation: 7032

$.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>!");
    });
});

Upvotes: 1

Jonny Burger
Jonny Burger

Reputation: 921

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?

Upvotes: 0

GillesC
GillesC

Reputation: 10874

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.

Upvotes: 0

jbabey
jbabey

Reputation: 46647

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.

Upvotes: 0

Related Questions