Merge branch 'lars' into 'master'

Lars

See merge request !131

website/public/API/edit_friendship.php

@@ -1,31 +0,0 @@
-<?php
-session_start();
-
-require("../../queries/friendship.php");
-require("../../queries/user.php");
-
-if(empty($_POST["userID"]) OR empty($_POST["delete"]) AND empty($_POST["accept"]) AND empty($_POST["request"])) {
-    echo "Not enough arguments.";
-    return;
-}
-
-$friendship_status = getFriendshipStatus($_POST["userID"]);
-echo "\nfriendshipstatus: $friendship_status";
-echo "You: " . $_SESSION["userID"];
-echo "other user: " . $_POST["userID"];
-
-
-if(!empty($_POST["request"]) AND $friendship_status == 0) {
-    echo "request";
-    requestFriendship($_POST["userID"]);
-} else if(!empty($_POST["delete"]) AND in_array($friendship_status, array(1, 2, 3))) {
-    echo "delete";
-    removeFriendship($_POST["userID"]);
-} else if (!empty($_POST["accept"]) AND $friendship_status == 3) {
-    echo "accept";
-    acceptFriendship($_POST["userID"]);
-}
-
-$username = getUsername($_POST["userID"]);
-
-header("Location: ../profile.php?username=$username");

website/public/API/searchGroups.php

@@ -0,0 +1,28 @@
+<?php
+
+
+session_start();
+
+require_once ("../../queries/connect.php");
+require_once ("../../queries/checkInput.php");
+require_once ("../../queries/group_member.php");
+require_once ("../../queries/group_page.php");
+
+$n = 0;
+if (isset($_POST["n"])) {
+    $n = (int) test_input($_POST["n"]);
+}
+$m = 20;
+if (isset($_POST["m"])) {
+    $m = (int) test_input($_POST["m"]);
+}
+$search = "";
+if (isset($_POST["search"])) {
+    $search = test_input($_POST["search"]);
+}
+
+if (isset($_POST["filter"]) && $_POST["filter"] == "personal") {
+    echo searchSomeOwnGroups($n, $m, $search);
+} else {
+    echo searchSomeGroups($n, $m, $search);
+}

website/public/API/searchUsers.php

@@ -0,0 +1,27 @@
+<?php
+
+session_start();
+
+require_once ("../../queries/connect.php");
+require_once ("../../queries/checkInput.php");
+require_once ("../../queries/friendship.php");
+require_once ("../../queries/user.php");
+
+$n = 0;
+if (isset($_POST["n"])) {
+    $n = (int) test_input($_POST["n"]);
+}
+$m = 20;
+if (isset($_POST["m"])) {
+    $m = (int) test_input($_POST["m"]);
+}
+$search = "";
+if (isset($_POST["search"])) {
+    $search = test_input($_POST["search"]);
+}
+
+if (isset($_POST["filter"]) && $_POST["filter"] == "personal") {
+    echo searchSomeFriends($n, $m, $search);
+} else {
+    echo searchSomeUsers($n, $m, $search);
+}

website/public/bits/friend-item.php

@@ -4,12 +4,6 @@ session_start();
 
 include_once ("../../queries/friendship.php");
 
-if (isset($_POST["limit"])) {
-    $limit = $_POST["limit"];
-} else {
-    $limit = 5;
-}
-
 if (isset($_POST["action"])) {
     $action = $_POST["action"];
 } else {
@@ -26,11 +20,6 @@ $friends = json_decode($_POST["friends"]);
 
 foreach($friends as $i => $friend) {
     $friendshipStatus = getFriendshipStatus($friend->userID);
-
-    if ($limit != 0 && $i >= $limit)
-        $extra = "extra-friend-item";
-    else
-        $extra = "";
     ?>
     <li class='friend-item <?= $extra ?>'>
         <form action='<?= $action ?>' method='<?= $actionType ?>'>
@@ -60,15 +49,13 @@ foreach($friends as $i => $friend) {
         </form>
         <?php
         if ($friendshipStatus > 1) {
+            if ($friendshipStatus == 2) {
+                $denyName = "Annuleer";
+            } else {
+                $denyName = "Weiger";
+            }
             ?>
-            <div class='notification-options'>
+                <div class='notification-options'>
-                <input type='hidden' name='userID' value='' />
-                <button name='delete'
-                        onclick="editFriendship('<?= $friend->userID ?>', 'delete')"
-                        class='deny-notification'
-                        value='1'>
-                    <i class='fa fa-times'></i>
-                </button>
             <?php
             if ($friendshipStatus == 3) {
                 ?>
@@ -76,11 +63,19 @@ foreach($friends as $i => $friend) {
                         onclick="editFriendship('<?= $friend->userID ?>', 'accept')"
                         class='accept-notification'
                         value='1'>
-                    <i class='fa fa-check'></i>
+                    <i class='fa fa-check'></i>Accepteer
                 </button>
                 <?php
             }
+
             ?>
+                <input type='hidden' name='userID' value='' />
+                <button name='delete'
+                        onclick="editFriendship('<?= $friend->userID ?>', 'delete')"
+                        class='deny-notification'
+                        value='1'>
+                    <i class='fa fa-times'></i> <?= $denyName ?>
+                </button>
             </div>
             <?php
         }
@@ -89,13 +84,6 @@ foreach($friends as $i => $friend) {
     <?php
 }
 
-if (sizeof($friends) > $limit) {
-    ?>
-    <li class='more-item'>
-        Meer vrienden...
-    </li>
-    <?php
-}
 
 ?>
 

website/public/bits/group-item.php

@@ -22,17 +22,3 @@ foreach($groups as $i => $group) {
     </li>
     <?php
 }
-    ?>
-    <li>
-        <form action="search.php" method="get">
-            <input type="hidden"
-                   name="search"
-                   value="" />
-            <input type="hidden"
-                   name="filter"
-                   value="groups" />
-            <button type="submit">
-                Alle groepen...
-            </button>
-        </form>
-    </li>

website/public/js/header.js

@@ -1,25 +1,19 @@
 $(document).ready(function() {
-    $("#own-profile-picture").click(function() {
+
-        if($("#notification-center").css('right') == "-256px") {
+    // Toggle menu
-            $(".content").animate({
+    $("#own-profile-picture, #open-notifications").click(function() {
-                marginRight: "256px"
+        if ($("#notification-center").css('right') == "-256px") {
-            }, 500);
+            // Make the menu visible and move the content to the left.
-            $(".chat-right").animate({
+            $("#chat-history").width("calc(100% - 587px)");
-                width: $(".chat-right").width() - 266
+            $(".modal").width("calc(100% - 512px)");
-            }, 500);
+            $(".content").css("margin-right", "256px");
-            $("#notification-center").animate({
+            $("#notification-center").css("right", "0px");
-                right: "0px"
-            }, 500);
         } else {
-            $(".chat-right").animate({
+            // Make the menu invisible and move the content to the right.
-                width: $(".chat-right").width() + 266
+            $("#chat-history").width("calc(100% - 331px)");
-            }, 500);
+            $(".modal").width("calc(100% - 256px)");
-            $(".content").animate({
+            $(".content").css("margin-right", "0px");
-                marginRight: "0px"
+            $("#notification-center").css("right", "-256px");
-            }, 500);
-            $("#notification-center").animate({
-                right: "-256px"
-            }, 500);
         }
     });
 });

website/public/js/menu.js

@@ -1,49 +1,28 @@
+var menuFriendsData;
+var menuGroupsData;
+var notificationMessagesData;
+var notificationRequestsData;
+
 
 $(document).ready(function() {
-    // Show more friends/users
-
-    // Show more friends
-    // $("#more-friends-click").click(function() {
-    //     // Show only friends
-    //     $("#groups-menu-section").slideUp();
-    //     $("#friends-menu-section li").show();
-    //
-    //     // Change buttons
-    //     $("#more-friends-click").hide();
-    //     $("#menu-back").show();
-    // });
-    //
-    // // Show more groups
-    // $("#more-groups-click").click(function() {
-    //     // Show only groups
-    //     $("#friends-menu-section").slideUp();
-    //     $("#groups-menu-section li").show();
-    //
-    //     // Change buttons
-    //     $("#more-groups-click").hide();
-    //     $("#menu-back").show();
-    // });
-
-    // // Go back
-    // $("#menu-back").click(function() {
-    //     // Show overview of friends and groups
-    //     $("#friends-menu-section").slideDown();
-    //     $("#groups-menu-section").slideDown();
-    //     $(".extra-menu-items").hide();
-    //
-    //     // Change buttons
-    //     $("#menu-back").hide();
-    //     $("#more-groups-click").show();
-    //     $("#more-friends-click").show();
-    // });
-
     loadMenuFriends(5);
     loadNotificationFriends();
     loadUnreadMessages();
     loadMenuGroups();
+    setInterval(updateMenus, 3000);
 });
 
 
+// Update the menu  and notification items.
+function updateMenus() {
+    loadMenuFriends(5);
+    loadNotificationFriends();
+    loadUnreadMessages();
+    loadMenuGroups();
+}
+
+
+// Get, every 3 seconds, the friends and insert them in the menu.
 function loadMenuFriends(limit) {
     $.post(
         "API/loadFriends.php",
@@ -51,16 +30,18 @@ function loadMenuFriends(limit) {
             limit: 5
         }
     ).done(function(data) {
-        if (showFriends(data, "#menu-friends-list", 5, "profile.php", "GET", limit)) {
+        if (menuFriendsData != data) {
-            $("#friends-menu-section").show();
+            menuFriendsData = data;
-        } else {
+            if (showFriends(data, "#menu-friends-list", 5, "profile.php", "GET", limit)) {
-            $("#friends-menu-section").hide();
+                $("#friends-menu-section").show();
+            } else {
+                $("#friends-menu-section").hide();
+            }
         }
     });
-
-    setTimeout(loadMenuFriends, 3000, limit);
 }
 
+// Get, every 3 seconds, the groups and insert them in the menu.
 function loadMenuGroups() {
     $.post(
         "API/loadGroups.php",
@@ -68,41 +49,45 @@ function loadMenuGroups() {
             limit: 5
         }
     ).done(function(data) {
-        if (showGroups(data, "#menu-groups-list")) {
+        if (menuGroupsData != data) {
-            $("#groups-menu-section").show();
+            menuGroupsData = data;
-        } else {
+            if (showGroups(data, "#menu-groups-list")) {
-            $("#groups-menu-section").hide();
+                $("#groups-menu-section").show();
+            } else {
+                $("#groups-menu-section").hide();
+            }
         }
     });
-
-    setTimeout(loadMenuGroups, 3000);
 }
 
+// Get, every 3 seconds, the friends requests and insert them in the notification center.
 function loadNotificationFriends() {
     $.post(
         "API/loadFriendRequest.php"
     ).done(function(data) {
-        if (showFriendsPlus(data, "#friend-requests-list", 5, "profile.php", "GET")) {
+        if (notificationRequestsData != data) {
-            $("#friend-request-section").show();
+            notificationRequestsData = data;
-        } else {
+            if (showFriendsPlus(data, "#friend-requests-list", 5, "profile.php", "GET")) {
-            $("#friend-request-section").hide();
+                $("#friend-request-section").show();
+            } else {
+                $("#friend-request-section").hide();
+            }
         }
     });
-
-    setTimeout(loadNotificationFriends, 3000);
 }
 
+// Get, every 3 seconds, the unread messages and insert them in the notification center.
 function loadUnreadMessages() {
     $.post(
         "API/loadChatNotifications.php"
     ).done(function(data) {
-        if (showFriendsPlus(data, "#unread-chat-list", 5, "chat.php", "GET")) {
+        if (notificationMessagesData != data) {
-            console.log(data);
+            notificationMessagesData = data;
-            $("#unread-messages-section").show();
+            if (showFriendsPlus(data, "#unread-chat-list", 5, "chat.php", "GET")) {
-        } else {
+                $("#unread-messages-section").show();
-            $("#unread-messages-section").hide();
+            } else {
+                $("#unread-messages-section").hide();
+            }
         }
     });
-
-    setTimeout(loadUnreadMessages, 3000);
 }

website/public/js/notifications.js

@@ -1,43 +0,0 @@
-// function showChatNotifications(notifications) {
-//     $("#unreadChatlist").html("");
-//     for (i in notifications) {
-//         $("#unreadChatlist").append(" \
-//             <li class='friend-item'> \
-//                 <form action='chat.php' method='get'> \
-//                     <button type='submit' \
-//                             name='chatID' \
-//                             value='"+ notifications[i].userID +"'> \
-//                         <div class='friend'> \
-//                             <img alt='PF' class='profile-picture' src='"+ notifications[i].profilepicture +"'/> \
-//                             <div class='friend-name'> \
-//                                 "+ notifications[i].name +"<br/> \
-//                                 <span style='color: #666'>"+ notifications[i].content +"</span> \
-//                             </div> \
-//                         </div> \
-//                     </button> \
-//                 </form> \
-//             </li> \
-//         ");
-//     }
-// }
-//
-// function loadNotifications() {
-//     $.post(
-//         "API/loadChatNotifications.php"
-//     ).done(function(data) {
-//         if (data && data != "[]") {
-//             $("#unread-messages-section").show();
-//             showChatNotifications(JSON.parse(data));
-//         } else {
-//             $("#unread-messages-section").hide();
-//         }
-//     });
-//
-//     setTimeout(loadNotifications, 10000);
-// }
-// $(document).ready(function() {
-//     loadNotifications();
-// });
-
-
-

website/public/js/search.js

@@ -0,0 +1,33 @@
+function searchUsers(n, m) {
+    $.post(
+        "API/searchUsers.php",
+        {
+            n: n,
+            m: m,
+            search: $("#search-input").val(),
+            filter: $("#search-filter").val()
+        }
+    ).done(function(data) {
+        console.log(data);
+        if (!showFriends(data, "#search-users-list", 0, "profile.php", "GET")) {
+            $("#search-users-list").text("Niemand gevonden");
+        }
+    });
+}
+
+function searchGroups(n, m) {
+    $.post(
+        "API/searchGroups.php",
+        {
+            n: n,
+            m: m,
+            search: $("#search-input").val(),
+            filter: $("#search-filter").val()
+        }
+    ).done(function(data) {
+        console.log(data);
+        if (!showGroups(data, "#search-groups-list")) {
+            $("#search-groups-list").text("Geen groepen gevonden");
+        }
+    });
+}

website/public/search.php

@@ -9,6 +9,8 @@
     <style>
         @import url("styles/search.css");
     </style>
+
+    <script src="js/search.js"></script>
 </head>
 <body>
 <?php

website/public/styles/header.css

@@ -43,6 +43,10 @@ header div {
     width: 64px;
 }
 
-#own-profile-picture {
+#own-profile-picture, #open-notifications {
     cursor: pointer;
 }
+
+#open-notifications {
+    padding: 5px 20px 5px 0px;
+}

website/public/styles/main.css

@@ -252,16 +252,20 @@ div[data-title]:hover:after {
     font-family: Arial, sans-serif;
 }
 
-.friend {
-
-}
-
-
 .friend-item, .group-item {
     cursor: pointer;
     transition-duration: 250ms;
 }
 
+.friend-item button, .group-item button {
+    background: none;
+    color: inherit;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    text-align: left;
+}
+
 .friend-item:hover, .group-item:hover {
     background: #FBC02D;
     box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

website/public/styles/menu.css

@@ -34,15 +34,6 @@
     cursor: pointer;
 }
 
-.menu button {
-    background: none;
-    color: inherit;
-    width: 100%;
-    height: 100%;
-    padding: 0;
-    text-align: left;
-}
-
 #notification-center {
     left: auto;
     width: 236px;
@@ -66,13 +57,8 @@
 }
 
 .notification-options {
+    width: 100%;
     display: none;
-    width: 100%;
-}
-
-.notification-options form {
-    width: 100%;
-    text-align: center;
 }
 
 .notification-options button {
@@ -92,3 +78,12 @@
 .friend-item:hover .notification-options {
     display: inline-block;
 }
+
+.menu button {
+    background: none;
+    color: inherit;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    text-align: left;
+}

website/queries/friendship.php

@@ -94,7 +94,7 @@ function selectAllFriendRequests() {
             `friendship`.`user2ID` = `user`.`userID` OR 
             `friendship`.`user2ID` = :userID AND
             `friendship`.`user1ID` = `user`.`userID`) AND
-            `user`.`role` != 5 AND
+            `user`.`role` != 'banned' AND
             `friendship`.`status` = 'requested'
     ");
 
@@ -218,3 +218,46 @@ function setLastVisited($friend) {
 
     return $stmt;
 }
+
+function searchSomeFriends($n, $m, $search) {
+    $stmt = $GLOBALS["db"]->prepare("
+    SELECT
+            `userID`,
+            `username`,
+            LEFT(CONCAT(`user`.`fname`, ' ', `user`.`lname`), 15) as `fullname`,
+            IFNULL(
+                `profilepicture`,
+                '../img/avatar-standard.png'
+            ) AS profilepicture,
+            `onlinestatus`,
+            `role`
+        FROM
+            `user`
+        INNER JOIN
+            `friendship`
+        WHERE
+            ((`friendship`.`user1ID` = :userID AND
+            `friendship`.`user2ID` = `user`.`userID` OR 
+            `friendship`.`user2ID` = :userID AND
+            `friendship`.`user1ID` = `user`.`userID`) AND
+            `user`.`role` != 'banned' AND
+            `friendship`.`status` = 'confirmed') AND
+            (`username` LIKE :keyword OR
+             `fname` LIKE :keyword OR
+             `lname` LIKE :keyword)
+    ORDER BY
+      `fname`,
+      `lname`,
+      `username`
+    LIMIT
+      :n, :m
+    ");
+
+    $search = "%$search%";
+    $stmt->bindParam(':keyword', $search);
+    $stmt->bindParam(':userID', $_SESSION["userID"], PDO::PARAM_INT);
+    $stmt->bindParam(':n', $n, PDO::PARAM_INT);
+    $stmt->bindParam(':m', $m, PDO::PARAM_INT);
+    $stmt->execute();
+    return json_encode($stmt->fetchAll());
+}

website/queries/group_member.php

@@ -27,3 +27,30 @@ function selectLimitedGroupsFromUser($userID, $limit) {
     return json_encode($stmt->fetchAll());
 }
 
+function searchSomeOwnGroups($n, $m, $search) {
+    $stmt = $GLOBALS["db"]->prepare("
+    SELECT
+        `group_page`.`name`,
+        `group_page`.`picture`
+    FROM
+        `group_page`
+    INNER JOIN
+        `group_member`
+    WHERE
+        `group_member`.`userID` = :userID AND
+        `group_member`.`groupID` = `group_page`.`groupID` AND
+        `group_page`.`status` != 'hidden' AND
+        `name` LIKE :keyword
+    LIMIT
+      :n, :m 
+    ");
+
+    $search = "%$search%";
+    $stmt->bindParam(':keyword', $search);
+    $stmt->bindParam(':userID', $_SESSION["userID"], PDO::PARAM_INT);
+    $stmt->bindParam(':n', $n, PDO::PARAM_INT);
+    $stmt->bindParam(':m', $m, PDO::PARAM_INT);
+    $stmt->execute();
+
+    return json_encode($stmt->fetchAll());
+}

website/queries/group_page.php

@@ -192,7 +192,7 @@ function searchSomeGroups($n, $m, $search) {
     $stmt->bindParam(':n', $n, PDO::PARAM_INT);
     $stmt->bindParam(':m', $m, PDO::PARAM_INT);
     $stmt->execute();
-    return $stmt;
+    return json_encode($stmt->fetchAll());
 }
 
 function countSomeGroups($search) {

website/queries/private_message.php

@@ -83,7 +83,7 @@ function selectAllUnreadChat() {
       `user`.`userID`,
       IFNULL(
           `profilepicture`,
-          '../img/notbad.jpg'
+          '../img/avatar-standard.png'
       ) AS profilepicture,
       LEFT(`private_message`.`content`, 15) as `content`
     FROM

website/queries/user.php

@@ -318,17 +318,16 @@ function selectRandomNotFriendUser($userID) {
     return $stmt->fetch();
 }
 
-function searchSomeUsers($n, $m, $search)
+function searchSomeUsers($n, $m, $search) {
-{
     $stmt = $GLOBALS["db"]->prepare("
     SELECT
+        `userID`,
         `username`,
         IFNULL(
             `profilepicture`,
-            '../img/notbad.jpg'
+            '../img/avatar-standard.png'
         ) AS profilepicture,
-        `fname`,
+        LEFT(CONCAT(`user`.`fname`, ' ', `user`.`lname`), 15) as `fullname`
-        `lname`
     FROM
       `user`
     WHERE
@@ -347,8 +346,10 @@ function searchSomeUsers($n, $m, $search)
     $stmt->bindParam(':keyword', $search);
     $stmt->bindParam(':n', $n, PDO::PARAM_INT);
     $stmt->bindParam(':m', $m, PDO::PARAM_INT);
+
     $stmt->execute();
-    return $stmt;
+
+    return json_encode($stmt->fetchAll());
 }
 
 function countSomeUsers($search) {

website/views/header.php

@@ -12,7 +12,6 @@ $userinfo = getHeaderInfo();
             <input name="search"
                    type="text"
                    placeholder="Zoek naar wat je wil"
-                   required
             />
             <button type="submit">
                 <i class="fa fa-search"></i>
@@ -27,6 +26,7 @@ $userinfo = getHeaderInfo();
             <?=$userinfo["fname"]?>
         </div>
         <img id="own-profile-picture" class="profile-picture" src="<?=$userinfo["profilepicture"]?>"/>
+        <i id="open-notifications" class="fa fa-bars"></i>
     </div>
 </header>
 <?php include("notification-center.php"); ?>

website/views/menu.php

@@ -1,25 +1,33 @@
 <nav class="menu">
     <section id="friends-menu-section">
         <h4>
-            Vrienden
+            Top vrienden
         </h4>
         <ul id="menu-friends-list" class="nav-list">
         </ul>
-        <h4><form action="search.php">
-            <input type="hidden"
-                   value="friends"
-                   name="filter" />
-            <button value=""
-                    name="search">
-                Alle vrienden...
-            </button>
-        </form></h4>
     </section>
     <section id="groups-menu-section">
         <h4>
-            Groepen
+            Top groepen
         </h4>
         <ul id="menu-groups-list" class="nav-list">
         </ul>
     </section>
+    <section>
+        <ul class="nav-list">
+            <li>
+                <form action="search.php" method="get">
+                    <input type="hidden"
+                           name="search"
+                           value="" />
+                    <input type="hidden"
+                           name="filter"
+                           value="personal" />
+                    <button type="submit">
+                        Klik voor al je groepen en vrienden...
+                    </button>
+                </form>
+            </li>
+        </ul>
+    </section>
 </nav>

website/views/notification-center.php

@@ -7,7 +7,7 @@
     </section>
     <section id="friend-request-section">
         <h4>
-            Vriendchapsverzoeken
+            Verzoeken
         </h4>
         <ul class="nav-list" id="friend-requests-list">
 

website/views/search-view.php

@@ -5,11 +5,11 @@ $user_perpage = $group_perpage = 20;
 $user_currentpage = $group_currentpage = 1;
 
 if (isset($_GET['user-pageselect'])) {
-    $user_currentpage = $_GET['user-pageselect'];
+    $user_currentpage = test_input($_GET['user-pageselect']);
 }
 
 if (isset($_GET['group-pageselect'])) {
-    $group_currentpage = $_GET['group-pageselect'];
+    $group_currentpage = test_input($_GET['group-pageselect']);
 }
 
 if (isset($_GET['search'])) {
@@ -17,7 +17,7 @@ if (isset($_GET['search'])) {
 }
 
 if (isset($_GET['filter'])) {
-    $filter = $_GET['filter'];
+    $filter = test_input($_GET['filter']);
 }
 
 $user_n = ($user_currentpage - 1) * $user_perpage;
@@ -37,26 +37,24 @@ $group_count = countSomeGroups($search)->fetchColumn();
                 Zoek:
             </label>
             <input type="text"
+                   id="search-input"
                    name="search"
+                   onkeyup="
+                           searchUsers(<?= $user_n ?>, <?= $user_perpage ?>);
+                           searchGroups(<?= $group_n ?>, <?= $group_perpage ?>);"
                    placeholder="Zoek"
                    value=<?php echo "$search";?>
             >
             <label for="filter">
                 Filter:
             </label>
-            <select name="filter">
+            <select name="filter" id="search-filter">
+                <option value="personal"
+                    <?php if ($filter == "personal") echo "selected";?>>
+                    Persoonlijk</option>
                 <option value="all"
                     <?php if ($filter == "all") echo "selected";?>>
                     Alles</option>
-                <option value="users"
-                    <?php if ($filter == "users") echo "selected";?>>
-                    Gebruikers</option>
-                <option value="groups"
-                    <?php if ($filter == "groups") echo "selected";?>>
-                    Groepen</option>
-                <option value="friends"
-                    <?php if ($filter == "friends") echo "selected";?>>
-                    Vrienden</option>
             </select>
             <input onclick="document.getElementById('user-pageselect').value = 1;
                             document.getElementById('group-pageselect').value = 1"
@@ -84,31 +82,12 @@ $group_count = countSomeGroups($search)->fetchColumn();
             ?>
         </select>
 
-        <ul class='nav-list'>
+        <ul id='search-users-list' class='nav-list'>
-
+            <script>
-        <?php
+            $(document).ready(function(){
-        $q = searchSomeUsers($user_n, $user_perpage, $search);
+                searchUsers(<?= $user_n ?>, <?= $user_perpage ?>);
-
+            });
-        while ($user = $q->fetch(PDO::FETCH_ASSOC)) {
+            </script>
-            $username = $user['username'];
-            $profilepic = $user['profilepicture'];
-            $fname = $user['fname'];
-            $lname = $user['lname'];
-
-            echo("
-                <a href='https://myhyvesbookplus.nl/profile?username=$username'>
-                    <li class='search-item'>
-                        <div class='friend'>
-                            <img class='profile-picture' 
-                                 src='$profilepic'>
-                            $fname $lname ($username)
-                        </div>
-                    </li>
-                </a>
-            ");
-        }
-        ?>
-
         </ul>
     </div>
 
@@ -131,28 +110,12 @@ $group_count = countSomeGroups($search)->fetchColumn();
             ?>
         </select>
 
-        <ul class="nav-list">
+        <ul id="search-groups-list" class="nav-list">
-
+            <script>
-        <?php
+                $(document).ready(function(){
-        $q = searchSomeGroups($group_n, $user_perpage, $search);
+                    searchGroups(<?= $group_n ?>, <?= $group_perpage ?>);
-
+                });
-        while ($group = $q->fetch(PDO::FETCH_ASSOC)) {
+            </script>
-            $groupname = $group['name'];
-            $grouppic = $group['picture'];
-
-            echo("
-            <a href='https://myhyvesbookplus.nl/group?groupName=$groupname'>
-                <li class='search-item'>
-                    <div class='group'>
-                        <img class='group-picture' 
-                             src='$grouppic'>
-                        $groupname
-                    </div>
-                </li>
-            </a>
-            ");
-        }
-        ?>
         </ul>
     </div>
 </div>