Showing or hiding DIV based on data from AJAX

Showing or hiding DIV based on data from AJAX

I am new to jQuery and can't get this to work properly. I am loading content form a php page through an AJAX call. Based on the data that is returned I want to fade in a DIV or keep it hidden. Therefore I have a if construction that checks the data that was inserted in a DIV from the PHP page. If the PHP page returned 'No data' the DIV should remain hidden. The loading part works OK, but somehow the hiding or showing of the DIV doesn't work. What am I doing wrong? Is the syntax correct? This is what I have now:
  1. <head>
  2. <script type="text/javascript">
    $(document).ready(function() {

        // Make ajax call and load data from notifications.php
            $.ajax({
              url: "notifications.php",
              cache: false,
            //if load is success ->
              success: function(notification) {
                // -> Append data from notifications to #information div through .html
                $("#information").html(notification),
                // log notification
                console.log(notification);
                }
            });
       
        // check if there is 'No data', otherwise show div
            if(document.getElementById("information").innerHTML != "No data"){
            // Fade in #information div in 2 seconds
                $("#information").fadeIn(2000),
                console.log("Fade in success");
                }
    });
    </script>






















  3. </head>
    <body>
    <div id="information"></div>
    </body>
    </html>





The idea is to be able to push a warning notification to users of the site (like 'Breaking News). Therefore the Ajax call should be repeated every minute or so. How can I achieve this with setInterval?


Update: below the PHP code that prints out the DB query result:
  1. <?php if ($totalRows_notification != 0) {echo $row_notification['message'];} else {die("No data");}?>