Display popup information

Question

I have this leaderboard: leaderboard

when you click a name in the leaderboard, a popup window is displayed. pop-up window

Now I want to display information about any person whose name was clicked in a pop-up window. As you can see, the popup does not contain any data.

I am using an active directory, from where I can get data like pic profile and other information from the DB database that I support.

Question: How to link the active directory and databases and display the necessary information in a pop-up window when the name is clicked. Please, help

Javascript related to 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 the active directory I use this variable and repeat it wherever I want for the registered 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 the 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 problems about the same.

Answer 2

It seems that your data is stored in db, and you already managed to get it correctly. Therefore, instead of making an ajax call, perhaps you can consider all the necessary information / key as user attributes in the html tag so that it can be easily retrieved using JavaScript. i.e;.

 <li id="someid" designation="..." rmanager="..." email="..."> <mark>Weekly LB</mark> <small>315</small> </li> 

and using jquery;

 var designation = $('#someid').attr('designation'); $('#designation-field').text('Designation: ' + designation); 

hope this helps.

By the way, this method has its advantages and disadvantages; Disadvantage: it will increase your page size Advantage: it will reduce client-server and database calls

Answer 3

You tried like this ... Define a class of elements li, as shown below.

 <div class="leaderboard"> <ul> <li class="name">value</li> <li class="points">value</li> </ul> </div> 

Then enter a value like this

 var name= $(".leaderboard").find('.name').text(); var points= $(".leaderboard").find('.points').text(); $('#popup-name').text('Name: ' + name); $('#popup-score').text('Score: ' + points);