display info in popup

Question

I have this leaderboard : leaderboard

on clicking a name in the leaderboard, a popup gets displayed. popup snap

Now ,I want to display info of any person whose name has been clicked in the popup.As,you can see the popup doesnot contain any data.

I have been using an active directory,from where I can fetch data like the profile pic and other info from a DB i am maintaing.

Question is How do i link the active directory and databases and display the required info in the popup,when a name is clicked.Please help

Javascript involved with the popup :

$(document).ready(function() {
        $('.tab a').on('click', function(e) {
            e.preventDefault();
            var _this = $(this);
            var block = _this.attr('href');
            $(".tab").removeClass("active");
            _this.parent().addClass("active");
            $(".leadboardcontent").hide();
            $(block).fadeIn();
        });


        /**
         * Fade in the Popup
         */
        $('.leaderboard li').on('click', function () {
            $('#popup').fadeIn();
            var mark = $(this).find('name').text();
            var small = $(this).find('points').text();
            $('#popup-name').text('Name: ' + name);
            $('#popup-score').text('Score: ' + points);
        });

});

for active directory I am using this variable and echo it wherever I want for the logged in user :

<?php
$username   = $_POST['username'];
$password   = $_POST['password'];
$server = 'ldap:xxxxx';
$domain = 'xxx'
$port       = xxx;

$ldap_connection = ldap_connect($server, $port);
if (! $ldap_connection)
{
    echo '<p>LDAP SERVER CONNECTION FAILED</p>';
    exit;
}

// Help talking to AD
ldap_set_option($ldap_connection, LDAP_OPT_PROTOCOL_VERSION, 3);
ldap_set_option($ldap_connection, LDAP_OPT_REFERRALS, 0);

$ldap_bind = @ldap_bind($ldap_connection, $username.$domain, $password);

if (! $ldap_bind)
{
    echo '<p>LDAP BINDING FAILED</p>';
    exit;
}
else
{
	echo 'login successful <br/>';

}
$base_dn = "OU=Employees,OU=Accounts,OU=India,DC=asia,DC=manh,DC=com";
$filter ="(&(objectClass=user)(samaccountname=$username))";

$result = ldap_search($ldap_connection,$base_dn,$filter);

$rescount = ldap_count_entries($ldap_connection,$result);

$data = ldap_get_entries($ldap_connection,$result);

if ($data["count"] > 0)
{
for ($i=0; $i<$data["count"]; $i++)
{

if(isset($data[$i]["employeeid"][0]))
{
$user= $data[$i]["employeeid"][0];
session_start();
$_SESSION['id']=$user;
}


if (isset($data[$i]["thumbnailphoto"][0]))
{
$photo=$data[$i]["thumbnailphoto"][0];
$_SESSION['photo']=$photo;

}


if (isset($data[$i]["title"][0]))
{
$title=$data[$i]["title"][0];
$_SESSION['Employeetitle']=$title;
}


if (isset($data[$i]["department"][0]))
{
$department=$data[$i]["department"][0];
$_SESSION['Employeedepartment']=$department;
}



}
}
else
        {
            echo "<p>No results found!</p>";
        }


if(isset($_SESSION['id']))
{
echo "session set";
header('location:Profile/index.php');
}


?>

Answer 1

Update

Replace code with following code

HTML

<li>
                                        <mark>Weekly LB</mark>
                                        <small>315</small>
                                        <input type="hidden" class="email" value="<?php echo $_SESSION['Employeetitle']; ?>">
                                        <input type="hidden" class="designation" value="<?php $_SESSION['Employeedepartment'] ?>">
                                        <input type="hidden" class="pro_pic" value="<?php echo $_SESSION['photo']; ?>">
                                    </li>

JS

                            /**
                             * Fade in the Popup
                             */
                            $('.leaderboard li').on('click', function () {
                                $('#popup').fadeIn();

                                // Changes
                                var email = $(this).find('.email').val();
                                var designation = $(this).find('.designation').val();
                                var pro_pic = $(this).find('.pro_pic').val();
                                // -------------------

                                var mark = $(this).find('mark').text();
                                var small = $(this).find('small').text();

                                // Changes
                                $('#popup-email').text('Email: ' + email);
                                $('#popup-designation').text('Name: ' + designation);
                                $('.profile__image').attr("src", pro_pic);
                                // -------------------

                                $('#popup-name').text('Name: ' + mark);
                                $('#popup-score').text('Score: ' + small);
                            });

Let me know if you have any concerns for the same..