JSFiddle - React, Tailwind, and code Playground
HTML
<div class="sidebar-feed-container">
<?php
//Part for the Ajax Request
if(isset($_GET['update']) && isset($_GET['talentosLast']) && isset($_GET['interactivoLast'])){
$getSideBarFeedInteractivo = mysql_query('SELECT id,type,text,date,logo,user FROM feeds WHERE type = "interactivo" AND date >' . $_GET['interactivoLast'] . 'ORDER BY date DESC LIMIT 20 ');
$getSideBarFeedInteractivoArray = mysql_fetch_array($getSideBarFeedInteractivo);
echo '<div class="hidden sidebar-item item-talentos" time="' . $getSideBarFeedInteractivoArray['date'] . '"' . '>';
echo '<div class="sidebar-item-image">';
echo '<img src="images/' . $getSideBarFeedInteractivoArray['logo'] . '"' . '/>';
echo '</div>';
echo '<div class="sidebar-item-content">';
echo $getSideBarFeedInteractivoArray['user'] . '<br />';
echo $getSideBarFeedInteractivoArray['text'];
echo '</div>';
echo '<div style="clear: both;"></div>';
echo '</div>';
}
//Getting Feed Talentos Onload
while ($row3 = mysql_fetch_array($getSideBarFeedTalentos)){
echo '<div class="sidebar-item item-talentos" time="' . $row3['date'] . '"' . '>';
echo '<div class="sidebar-item-image">';
echo '<img src="images/' . $row3['logo'] . '"' . '/>';
echo '</div>';
echo '<div class="sidebar-item-content">';
echo $row3['user'] . '<br />';
echo $row3['text'];
echo '</div>';
echo '<div style="clear: both;"></div>';
echo '</div>';
}
//Getting Feed Interactivo OnLoad
while ($row4 = mysql_fetch_array($getSideBarFeedInteractivo)){
echo '<div class="sidebar-item item-interactivo" time="' . $row4['date'] . '"' . '>';
echo '<div...
JavaScript
//so we are gonna check the database for updates every every 3 seconds (3000 milliseconds)
setInterval(function () {
var interactivoLast = $(".sidebar-feed-container>.item-interactivo:first-child").attr("time");
var talentosLast = $(".sidebar-feed-container>.item-talentos:first-child").attr("time");
var interactivoLast2 = $(".sidebar-feed-container>.item-interactivo")[0].attr("time");
var update = "update"; //this var is just os that you can run the relevant php
//alert(talentosLast);
$.get("index.php", {
'update': update, 'interactivoLast': interactivoLast, 'talentosLast': talentosLast } )
.done(function( data ) {
//so i will find the container of the 'sidebar-item's and then select all children
var hiddenItems = $(data).find(".sidebar-feed-container").children(".hidden");
//loop over items
hiddenItems.each(function( index ) {
//lets remove the hidden class here (when you use php on load hidden wont exist)
$(this).removeClass("hidden");
//prepend NOT append the html of each to the feed (the css will choose to display or not display items (eg. not display interactivo item when only talentos items are
//showing
$(".sidebar-feed-container").prepend($(this));
});
});
},3000);