JSFiddle - React, Tailwind, and code Playground

by rohanbhangui

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']))
        {
            #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 I got any updates...I'm going to get this...
            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>

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 () {
    var update = "update"; //this var is just os that you can run the relevant php
    $.get("index.php", {
        'update': update } )
    .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);