JSFiddle - React, Tailwind, and code Playground
HTML
<!-- talentos feed item -->
<div class="sidebar-feed-container">
<?php
# php query goes here (below is pseudo code)
$query = mysql_query("SELECT * FROM [...]");
if(isset($_GET['update']) && isset($_GET['talentosLast']) && isset($_GET['interactivoLast']))
{
#do your db requests here now im gonna put some sudo variables in for certain things that must change
//When update is true...I will echo this...
//yes....you will have to figure out how to get last update
checkupdate();//this is a psuedo function that returns true or false
if(checkupdates){
echo "<div class=\"hidden sidebar-item item-" . $feedNameType . "\"><div class=\"sidebar-item-image\"><img src="images/feed-image-" . $feedNameType . ".png" />";
}
}
?>
<div class="sidebar-item item-talentos">
<div class="sidebar-item-image">
<img src="images/feed-image-talentos.png" />
</div>
<div class="sidebar-item-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. #twitter</div>
<div style="clear: both;"></div>
</div>
<!-- interactivo feed item -->
<div class="sidebar-item item-interactivo">
<div class="sidebar-item-image">
<img src="images/feed-image-interactivo.png" />
</div>
<div class="sidebar-item-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. #twitter</div>
<div style="clear: both;"></div>
</div>
</div>
<div class="modal-content interactivo">
<div class="sidebar-feed">
<?php
if(isset($_GET['update1'])){
$getModalFeedInteractivoAjax = mysql_query('SELECT id,type,text,date,logo,user FROM feeds WHERE type = "interactivo" ORDER BY date DESC LIMIT...
CSS
/* so that right there is the basic structure for a sidebar feed item. the generic targeter is 'sidebar-item', now to tell all the feed items apart i use 'item-...' (in this case talentos).*/
JavaScript
//so we are gonna check the database for updates every every 3 seconds (3000 milliseconds)
setInterval(function () {
//create 2 vars that soter the last date of the first talentos and first interactivo item (this is assuming each feed items has attribute time
var interactivoLast = $(".sidebar-feed-container>.interactivo:first-child").attr("time");
var talentosLast = $(".sidebar-feed-container>.talentos:first-child").attr("time");
//notice the space in the selector
var mobileInteractivoLast = $(".modal-content.interactivo sidebar-feed-item:first-child").attr("time");
var mobileTalentosLast = $("modal-content.talentos sidebar-feed-item:first-child").attr("time");
var update = "update"; //this var is just so that you can trigger the relevant php
$.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).html());
});
});
},3000);