在弹出窗口中显示信息

Question

我有这个排行榜： leaderboard

单击排行榜中的名称时，会显示一个弹出窗口。 popup snap

现在，我想在弹出窗口中显示任何姓名被点击的人的信息。因为，您可以看到弹出窗口不包含任何数据。

我一直在使用活动目录，从中我可以从我正在维护的数据库中获取个人资料图片和其他信息等数据。

问题是如何链接活动目录和数据库并在单击名称时在弹出窗口中显示所需信息。请帮助

弹出窗口涉及的Javascript：

$(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);
        });

});

对于活动目录，我正在使用此变量并将其回显到登录用户所需的任何位置：

<?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

更新

将代码替换为以下代码

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);
                            });

如果您对此有任何顾虑，请告诉我。

Answer 2

您的数据似乎存储在数据库中，并且您已经设法正确获取它们。因此，您可以将所有必要的信息/键视为 html 标记中的自定义属性，而不是进行 ajax 调用，以便可以通过 JavaScript 轻松获取它。即;

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

并使用 JQuery；

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

希望它会有所帮助。

顺便说一下，这种方法有优点也有缺点； 缺点：它会增加您的列表页面大小 优点：将减少客户端-服务器和数据库调用

Answer 3

你试过这样吗... 定义 li 元素的类如下..

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

然后像这样获取值

var name= $(".leaderboard").find('.name').text();
var points= $(".leaderboard").find('.points').text();

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